// aop-components.jsx
// /ai-operable-product page sections — registered on window.FormativeSite.sections
// Load order: tweaks-panel.jsx → site-components.jsx → aop-components.jsx → render call
//
// All product claims on this page trace to the ai-operable-product skill:
// https://github.com/khangtoh/ai-operable-product  (SKILL.md, references/, examples/)

// ── Design tokens ─────────────────────────────────────────────────────────────
// Re-declared here because each text/babel script compiles in its own scope.
const TEAL  = "#00e5c3";
const VOID  = "#111114";
const SURF  = "#16161a";
const TEXT  = "#e8e8ef";
const MUTED = "rgba(232,232,239,0.55)";
const HAIR  = "rgba(255,255,255,0.07)";

// ── Skill icon — hub-and-spoke tile shipped with the skill. Carries its own
//    palette (navy → teal); used only at product-mark sizes so it reads as the
//    skill's identity rather than a competing brand surface.
const AOP_ICON = "assets/ai-operable-icon.svg";
const AOP_REPO = "https://github.com/khangtoh/ai-operable-product";

// ── Scroll-reveal hook ────────────────────────────────────────────────────────
function useReveal(threshold = 0.1) {
  const ref = React.useRef(null);
  const [on, setOn] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el || on) return;
    const obs = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { setOn(true); obs.disconnect(); } },
      { threshold, rootMargin: "0px 0px -40px 0px" }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, [on]);
  return [ref, on];
}

function revealStyle(on, delay = 0) {
  return {
    opacity: on ? 1 : 0,
    transform: on ? "translateY(0)" : "translateY(24px)",
    transition: `opacity 0.72s cubic-bezier(0.16,1,0.3,1) ${delay}ms, transform 0.72s cubic-bezier(0.16,1,0.3,1) ${delay}ms`,
  };
}

function Eyebrow({ children, style = {} }) {
  return (
    <p style={{
      fontFamily: "'IBM Plex Mono', monospace",
      fontSize: 10, fontWeight: 400, color: TEAL,
      letterSpacing: "0.14em", textTransform: "uppercase",
      marginBottom: 22, ...style,
    }}>
      {children}
    </p>
  );
}

const AOP_BUTTON_CSS = `
  .aop-btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #00e5c3, #3b7cf4);
    color: #0a0a0c;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px; font-weight: 700;
    padding: 14px 28px; border-radius: 10px;
    text-decoration: none; letter-spacing: 0.01em;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    white-space: nowrap;
  }
  .aop-btn-primary:hover,
  .aop-btn-primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 16px 48px rgba(0,229,195,0.32);
  }
  .aop-btn-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid rgba(0,229,195,0.35);
    color: rgba(232,232,239,0.65);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px; font-weight: 400;
    padding: 14px 24px; border-radius: 10px;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
  }
  .aop-btn-ghost:hover,
  .aop-btn-ghost:focus-visible {
    border-color: rgba(0,229,195,0.65); color: #e8e8ef; background: rgba(0,229,195,0.04);
  }
  .aop-btn-primary:focus-visible,
  .aop-btn-ghost:focus-visible { outline: 2px solid rgba(0,229,195,0.6); outline-offset: 3px; }
`;

// ── Section 01: AopHero ───────────────────────────────────────────────────────
// Centered category claim. The definition is the skill's own Design Principle
// (SKILL.md § Design Principle), not a paraphrase.
function AopHero() {
  const [ref, on] = useReveal(0.05);

  return (
    <section ref={ref} className="aop-hero" style={{
      position: "relative", display: "flex",
      alignItems: "center", justifyContent: "center",
      padding: "140px 60px 110px", overflow: "hidden",
    }}>
      <style>{`
        .aop-hero { min-height: 100vh; min-height: 100svh; }
        .aop-hero-glow {
          position: absolute; left: 50%; top: 44%;
          transform: translate(-50%,-50%);
          width: min(900px, 92vw); height: 420px;
          pointer-events: none;
          background: radial-gradient(ellipse at center, rgba(0,229,195,0.07) 0%, transparent 70%);
          filter: blur(56px);
        }
        ${AOP_BUTTON_CSS}
        @media (max-width: 768px) {
          .aop-hero      { padding: 112px 20px 72px !important; }
          .aop-hero-btns { flex-direction: column !important; align-items: stretch !important; width: 100%; }
          .aop-hero-btns a { width: 100%; text-align: center; justify-content: center; white-space: normal !important; line-height: 1.35; }
        }
      `}</style>

      <div className="aop-hero-glow" />

      <div style={{
        position: "relative", zIndex: 1, width: "100%", maxWidth: 880,
        display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center",
      }}>

        <div style={revealStyle(on, 0)}>
          <Eyebrow style={{ marginBottom: 26 }}>
            Formative Labs&nbsp; ·&nbsp; The AI-Operable Product
          </Eyebrow>
        </div>

        <h1 style={{
          fontFamily: "'Instrument Serif', Georgia, serif",
          fontSize: "clamp(34px, 5.4vw, 74px)",
          fontWeight: 400, lineHeight: 1.06, letterSpacing: "-0.022em",
          color: TEXT, marginBottom: 26, ...revealStyle(on, 90),
        }}>
          Most products are human-operable.<br />
          <em style={{ fontStyle: "italic" }}>Almost none are AI-operable.</em>
        </h1>

        <p style={{
          fontFamily: "'IBM Plex Sans', sans-serif",
          fontSize: "clamp(16px, 1.3vw, 19px)", lineHeight: 1.68,
          color: "rgba(232,232,239,0.62)",
          maxWidth: "60ch", marginBottom: 44, ...revealStyle(on, 170),
        }}>
          A product that cannot express how it operates cannot be reliably reasoned
          about by an AI operator. That is a property of the{" "}
          <span style={{ color: TEXT, fontWeight: 500 }}>product</span> — not of the
          model you point at it, and not of your vendor stack.
        </p>

        {/* ── The definition — verbatim in substance from SKILL.md's Design Principle ── */}
        <div style={{
          width: "100%", maxWidth: 660,
          border: `1px solid ${HAIR}`,
          borderTop: "1px solid rgba(0,229,195,0.28)",
          borderRadius: 12,
          background: "rgba(22,22,26,0.6)",
          backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)",
          padding: "24px 26px", textAlign: "left", marginBottom: 44,
          ...revealStyle(on, 250),
        }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginBottom: 12 }}>
            <span style={{
              fontFamily: "'IBM Plex Mono', monospace", fontSize: 11,
              letterSpacing: "0.16em", textTransform: "uppercase",
              color: TEAL, fontWeight: 500,
            }}>AI-operable</span>
            <span style={{
              fontFamily: "'IBM Plex Mono', monospace", fontSize: 11,
              color: "rgba(232,232,239,0.3)", fontStyle: "italic",
            }}>adj.</span>
          </div>
          <p style={{
            fontFamily: "'IBM Plex Sans', sans-serif",
            fontSize: 15, lineHeight: 1.75, color: MUTED, margin: 0,
          }}>
            Of a product: exposing enough explicit operational context that a human or
            AI operator can <span style={{ color: TEXT }}>observe</span> what is
            happening, <span style={{ color: TEXT }}>reason</span> about why it is
            happening, determine what can{" "}
            <span style={{ color: TEXT }}>safely be done</span>,{" "}
            <span style={{ color: TEXT }}>verify</span> the result, and{" "}
            <span style={{ color: TEXT }}>learn</span> from the outcome.
          </p>
        </div>

        <div className="aop-hero-btns" style={{
          display: "flex", gap: 14, alignItems: "center",
          justifyContent: "center", flexWrap: "wrap", ...revealStyle(on, 330),
        }}>
          <a className="aop-btn-primary" href="/fde#fde-cta" aria-label="Build an AI-Operable Product with Formative Labs">
            Build an AI-Operable Product
          </a>
          <a className="aop-btn-ghost" href="#aop-skill">
            Try the AI-Operable Product Skill &nbsp;↓
          </a>
        </div>
      </div>
    </section>
  );
}

// ── Section 02: AopSkill ──────────────────────────────────────────────────────

// Terminal transcript. Install path and invocation follow platforms/claude/README.md
// and the "First interaction" example in the skill's README.
const AOP_LOG = [
  { kind: "cmd",   text: "git clone " + AOP_REPO + " \\" },
  { kind: "cont",  text: "  .claude/skills/ai-operable-product" },
  { kind: "ok",    text: "skill available: ai-operable-product" },
  { kind: "blank" },
  { kind: "say",   text: "Use the AI-Operable Product skill. Business journey is" },
  { kind: "cont",  text: "Digital Lending — Personal Loan Application. Approved" },
  { kind: "cont",  text: "applications are stuck on Processing over the last 2 hours." },
  { kind: "blank" },
  { kind: "step",  text: "Establishing product operating context" },
  { kind: "step",  text: "Discovering evidence sources", detail: "6 available · 2 authoritative" },
  { kind: "step",  text: "Building source capability map" },
  { kind: "step",  text: "Correlating", detail: "application_id · workflow_id · trace_id" },
  { kind: "step",  text: "Reconstructing", detail: "expected vs implemented vs actual" },
];

// Reconstructed state — drawn from examples/digital-lending.md.
const AOP_STATE = [
  ["Expected",   "Approved loan booked and disbursed exactly once."],
  ["Journey",    "Application COMPLETE · Eligibility PASSED · Credit APPROVED · Agreement ACCEPTED · Disbursement PROCESSING"],
  ["Workflow",   "Core posting call timed out. Authoritative posting state UNKNOWN."],
  ["Recovery",   "Reconciliation required before any retry."],
  ["Policy",     "Duplicate financial posting must not occur."],
  ["Confidence", "Medium until authoritative ledger state is inspected."],
];

// The seven operating primitives — references/operating-primitives.md.
const AOP_PRIMITIVES = [
  { n: "01", label: "Outcome Intent",  q: "What does success mean?",
    body: "The customer outcome the product should produce. System health is not automatically product success." },
  { n: "02", label: "Journey Context", q: "Where is the user?",
    body: "Enough business context to reconstruct what the user was trying to do, what they experienced, and where they are in the journey." },
  { n: "03", label: "Workflow Map",    q: "How does work move?",
    body: "How work progresses across services, events, workflows, databases, and human handoffs. A service topology is not a workflow map." },
  { n: "04", label: "Recovery Path",   q: "How does failure resolve?",
    body: "Designed retry, compensation, reconciliation, rollback, replay, failover, or escalation. Detecting failure is not recovery." },
  { n: "05", label: "Policy Boundary", q: "What must not happen?",
    body: "Authorization, approvals, regulatory controls, privacy constraints, blast-radius limits, and prohibited actions." },
  { n: "06", label: "Safe Actions",    q: "What can be done?",
    body: "Actions with explicit preconditions, authority, scope, verification, and reversibility. An executable API is not automatically a Safe Action." },
  { n: "07", label: "Feedback Loop",   q: "How does the product learn?",
    body: "How production evidence changes code, tests, runbooks, policy, automation, or the journey itself. Telemetry alone is not a feedback loop." },
];

// AI-OPERABLE DONE — references/ai-operable-done.md. Results are PASS / PARTIAL /
// FAIL / UNKNOWN; the skill produces no numeric score, so the page shows none.
const AOP_DONE = [
  ["Outcome measurable",  "PARTIAL", "Can production evidence determine whether the intended outcome happened?"],
  ["Journey observable",  "PASS",    "Can the customer's path and journey state be reconstructed?"],
  ["Failure explainable", "PARTIAL", "Can we explain what failed, where, why, and its business effect?"],
  ["Recovery designed",   "FAIL",    "Is recovery designed rather than improvised?"],
  ["Actions governed",    "PARTIAL", "Are allowed actions explicit, bounded, auditable, and policy-constrained?"],
  ["Support enabled",     "FAIL",    "Can support remediate without reverse-engineering the system?"],
  ["Learning feeds back", "UNKNOWN", "Does production experience change future behaviour?"],
];

// Verdict is encoded tonally, not by hue: teal presence means the capability is
// present, its absence means a gap. Keeps the page inside the two-colour system.
const DONE_STYLE = {
  PASS:    { color: TEAL,                      border: "rgba(0,229,195,0.5)",  bg: "rgba(0,229,195,0.08)", dash: false },
  PARTIAL: { color: "rgba(0,229,195,0.62)",    border: "rgba(0,229,195,0.22)", bg: "transparent",          dash: false },
  FAIL:    { color: "rgba(232,232,239,0.45)",  border: "rgba(255,255,255,0.12)", bg: "transparent",        dash: false },
  UNKNOWN: { color: "rgba(232,232,239,0.3)",   border: "rgba(255,255,255,0.12)", bg: "transparent",        dash: true  },
};

function DoneChip({ result }) {
  const s = DONE_STYLE[result];
  return (
    <span style={{
      fontFamily: "'IBM Plex Mono', monospace", fontSize: 9.5,
      letterSpacing: "0.14em", textTransform: "uppercase",
      color: s.color, background: s.bg,
      border: `1px ${s.dash ? "dashed" : "solid"} ${s.border}`,
      borderRadius: 100, padding: "3px 9px",
      whiteSpace: "nowrap", display: "inline-block",
    }}>{result}</span>
  );
}

function AopSkill() {
  const [ref, on]         = useReveal(0.08);
  const [termRef, termOn] = useReveal(0.15);
  const [cardHov, setCardHov] = React.useState(false);

  const LOG_STEP     = 95;
  const STATE_DELAY  = AOP_LOG.length * LOG_STEP + 180;

  return (
    <section ref={ref} id="aop-skill" className="aop-audit" style={{
      background: SURF, borderTop: `1px solid ${HAIR}`,
      padding: "120px 60px 130px", position: "relative",
    }}>
      <style>{`
        ${AOP_BUTTON_CSS}
        .aop-audit-grid {
          display: grid;
          grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
          gap: 56px; align-items: start;
          max-width: 1180px; margin: 0 auto;
        }
        /* No shadow at rest — depth arrives on hover only. */
        .aop-term { transition: box-shadow 0.4s ease, border-color 0.4s ease; }
        @media (prefers-reduced-motion: reduce) {
          .aop-done-row { transition: none !important; }
        }
        .aop-prim + .aop-prim { border-top: 1px solid ${HAIR}; }
        .aop-prim { padding: 18px 0; }
        .aop-prim:first-child { padding-top: 0; }

        .aop-done-row { display: grid; grid-template-columns: 190px 92px minmax(0,1fr); gap: 18px;
                        align-items: center; padding: 13px 0; border-top: 1px solid ${HAIR}; }
        .aop-done-row:first-of-type { border-top: none; }

        @media (max-width: 980px) {
          .aop-audit-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
        }
        @media (max-width: 768px) {
          .aop-audit      { padding: 88px 20px 96px !important; }
          .aop-term-body  { padding: 20px 15px !important; }
          .aop-term-line  { font-size: 10.5px !important; }
          .aop-done-row   { grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; }
          .aop-done-test  { grid-column: 1 / -1; }
          .aop-audit-btns { flex-direction: column !important; align-items: stretch !important; }
          .aop-audit-btns a { width: 100%; text-align: center; justify-content: center; white-space: normal !important; line-height: 1.35; }
        }
      `}</style>

      <div style={{ maxWidth: 1180, margin: "0 auto" }}>

        {/* ── Section head ── */}
        <div style={{ maxWidth: 680, marginBottom: 56, ...revealStyle(on, 0) }}>
          <Eyebrow>The AI-Operable Product Skill</Eyebrow>
          <h2 style={{
            fontFamily: "'IBM Plex Sans', sans-serif",
            fontSize: "clamp(28px, 3.4vw, 44px)",
            fontWeight: 700, lineHeight: 1.12, letterSpacing: "-0.025em",
            color: TEXT, marginBottom: 20,
          }}>
            Don&rsquo;t take the claim on faith. Reconstruct it.
          </h2>
          <p style={{
            fontFamily: "'IBM Plex Sans', sans-serif",
            fontSize: "clamp(15px, 1.15vw, 17px)", lineHeight: 1.75,
            color: MUTED, margin: 0,
          }}>
            An open Agent Skill that reconstructs the operating state of a business
            product or customer journey from fragmented enterprise evidence, then
            reasons over it through seven operating primitives. It reasons outward
            from the customer outcome — never inward from infrastructure telemetry.
          </p>
        </div>

        <div className="aop-audit-grid">

          {/* ── Terminal ── */}
          <div ref={termRef} style={revealStyle(on, 100)}>

            {/* Skill identity */}
            <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 22 }}>
              <img src={AOP_ICON} alt="" aria-hidden="true" width="56" height="56"
                style={{ width: 56, height: 56, display: "block", flexShrink: 0, borderRadius: 13 }} />
              <div style={{ minWidth: 0 }}>
                <p style={{
                  fontFamily: "'IBM Plex Mono', monospace",
                  fontSize: 15, color: TEXT, letterSpacing: "-0.005em", marginBottom: 6,
                }}>ai-operable-product</p>
                <p style={{
                  fontFamily: "'IBM Plex Mono', monospace", fontSize: 10,
                  letterSpacing: "0.14em", textTransform: "uppercase",
                  color: "rgba(232,232,239,0.35)",
                }}>Agent Skill &#183; Claude &amp; ChatGPT</p>
              </div>
            </div>

            <div
              className="aop-term terminal-card--unified"
              onMouseEnter={() => setCardHov(true)}
              onMouseLeave={() => setCardHov(false)}
              style={{
                borderRadius: 12,
                borderTop: "1px solid rgba(0,229,195,0.32)",
                borderLeft: `1px solid ${cardHov ? "rgba(0,229,195,0.18)" : "rgba(255,255,255,0.10)"}`,
                borderRight: `1px solid ${cardHov ? "rgba(0,229,195,0.18)" : "rgba(255,255,255,0.10)"}`,
                borderBottom: `1px solid ${cardHov ? "rgba(0,229,195,0.18)" : "rgba(255,255,255,0.10)"}`,
                overflow: "hidden", background: "#0d0d10",
                boxShadow: cardHov
                  ? "0 24px 60px rgba(0,0,0,0.5), 0 0 60px rgba(0,229,195,0.05)"
                  : "none",
              }}
            >
              {/* Header */}
              <div style={{
                height: 40, background: "#0c0c0f", borderBottom: `1px solid ${HAIR}`,
                display: "flex", alignItems: "center", justifyContent: "space-between",
                padding: "0 18px", userSelect: "none",
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: 9, minWidth: 0 }}>
                  <img src={AOP_ICON} alt="" aria-hidden="true" width="15" height="15"
                    style={{ width: 15, height: 15, display: "block", flexShrink: 0, borderRadius: 4 }} />
                  <span style={{
                    fontFamily: "'IBM Plex Mono', monospace", fontSize: 10,
                    letterSpacing: "0.14em", color: "rgba(232,232,239,0.55)",
                    whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
                  }}>ai-operable-product</span>
                </div>
                <span style={{
                  fontFamily: "'IBM Plex Mono', monospace", fontSize: 10,
                  letterSpacing: "0.18em", textTransform: "uppercase",
                  color: "rgba(232,232,239,0.3)", flexShrink: 0,
                }}>example</span>
              </div>

              {/* Body */}
              <div style={{ position: "relative", overflow: "hidden" }}>
                <div style={{
                  position: "absolute", inset: 0, pointerEvents: "none", zIndex: 0,
                  backgroundImage: "repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.055) 3px, rgba(0,0,0,0.055) 4px)",
                }} />
                <div className="aop-term-body" style={{ padding: "24px 26px", position: "relative", zIndex: 1 }}>

                  {AOP_LOG.map((line, i) => {
                    if (line.kind === "blank") return <div key={i} style={{ height: 12 }} />;
                    const delay = i * LOG_STEP;
                    const marker = line.kind === "cmd" ? "$"
                                 : line.kind === "say" ? "›"
                                 : line.kind === "ok"  ? "✓"
                                 : line.kind === "step" ? "·" : " ";
                    const color = line.kind === "cmd" || line.kind === "cont" ? "rgba(232,232,239,0.88)"
                                : line.kind === "say" ? "rgba(232,232,239,0.88)"
                                : line.kind === "ok"  ? "rgba(0,229,195,0.85)"
                                : "rgba(232,232,239,0.5)";
                    return (
                      <div key={i} className="aop-term-line" style={{
                        fontFamily: "'IBM Plex Mono', monospace",
                        fontSize: 11.5, lineHeight: 1.95,
                        display: "flex", alignItems: "baseline", gap: 8,
                        opacity: termOn ? 1 : 0,
                        transition: `opacity 0.35s ease ${delay}ms`,
                      }}>
                        <span style={{
                          color: line.kind === "ok" ? TEAL
                               : line.kind === "step" ? "rgba(232,232,239,0.25)"
                               : "rgba(0,229,195,0.7)",
                          flexShrink: 0, width: 8,
                        }}>{line.kind === "cont" ? "" : marker}</span>
                        <span style={{ color, minWidth: 0, wordBreak: "break-word" }}>
                          {line.text}
                          {line.detail && (
                            <span style={{ color: "rgba(232,232,239,0.3)" }}> &nbsp;— {line.detail}</span>
                          )}
                        </span>
                      </div>
                    );
                  })}

                  {/* Reconstructed product state */}
                  <div style={{
                    marginTop: 22, paddingTop: 18, borderTop: `1px solid ${HAIR}`,
                    opacity: termOn ? 1 : 0,
                    transition: `opacity 0.45s ease ${STATE_DELAY}ms`,
                  }}>
                    <p style={{
                      fontFamily: "'IBM Plex Mono', monospace", fontSize: 10,
                      letterSpacing: "0.16em", textTransform: "uppercase",
                      color: "rgba(232,232,239,0.4)", marginBottom: 14,
                    }}>Reconstructed product state &#183; <span style={{ color: TEXT }}>LA-82972</span></p>

                    {AOP_STATE.map(([k, v]) => (
                      <div key={k} style={{
                        display: "flex", gap: 12, marginBottom: 8,
                        fontFamily: "'IBM Plex Mono', monospace",
                        fontSize: 11, lineHeight: 1.7,
                      }}>
                        <span style={{ color: "rgba(0,229,195,0.55)", width: 78, flexShrink: 0 }}>{k}</span>
                        <span style={{ color: "rgba(232,232,239,0.62)", minWidth: 0 }}>{v}</span>
                      </div>
                    ))}
                  </div>

                </div>
              </div>
            </div>

            <p style={{
              fontFamily: "'IBM Plex Mono', monospace",
              fontSize: 10.5, lineHeight: 1.7,
              color: "rgba(232,232,239,0.32)",
              marginTop: 14, letterSpacing: "0.02em",
            }}>
              The skill grants no access of its own. Connector and tool permissions
              stay yours to configure.
            </p>
          </div>

          {/* ── Seven primitives ── */}
          <div style={revealStyle(on, 180)}>
            <p style={{
              fontFamily: "'IBM Plex Mono', monospace", fontSize: 10,
              letterSpacing: "0.14em", textTransform: "uppercase",
              color: "rgba(232,232,239,0.35)", marginBottom: 22,
            }}>
              Seven operating primitives
            </p>

            {AOP_PRIMITIVES.map((d) => (
              <div key={d.n} className="aop-prim">
                <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 6, flexWrap: "wrap" }}>
                  <span style={{
                    fontFamily: "'IBM Plex Mono', monospace", fontSize: 11,
                    color: "rgba(0,229,195,0.6)", flexShrink: 0,
                  }}>{d.n}</span>
                  <h3 style={{
                    fontFamily: "'IBM Plex Sans', sans-serif",
                    fontSize: 16.5, fontWeight: 600, letterSpacing: "-0.015em",
                    color: TEXT, margin: 0,
                  }}>{d.label}</h3>
                  <span style={{
                    fontFamily: "'IBM Plex Mono', monospace", fontSize: 11,
                    color: "rgba(232,232,239,0.38)", fontStyle: "italic",
                  }}>{d.q}</span>
                </div>
                <p style={{
                  fontFamily: "'IBM Plex Sans', sans-serif",
                  fontSize: 14, lineHeight: 1.7, color: MUTED,
                  margin: 0, paddingLeft: 23,
                }}>{d.body}</p>
              </div>
            ))}
          </div>
        </div>

        {/* ── AI-OPERABLE DONE ── */}
        <div style={{ marginTop: 76, ...revealStyle(on, 220) }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 8, flexWrap: "wrap" }}>
            <h3 style={{
              fontFamily: "'IBM Plex Sans', sans-serif",
              fontSize: "clamp(20px, 2vw, 26px)", fontWeight: 700,
              letterSpacing: "-0.02em", color: TEXT, margin: 0,
            }}>AI-OPERABLE DONE</h3>
            <span style={{
              fontFamily: "'IBM Plex Mono', monospace", fontSize: 10.5,
              letterSpacing: "0.13em", textTransform: "uppercase",
              color: "rgba(232,232,239,0.35)",
            }}>Acceptance criteria for the operating surface</span>
          </div>
          <p style={{
            fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 14.5,
            lineHeight: 1.7, color: MUTED, marginBottom: 26, maxWidth: "72ch",
          }}>
            Seven criteria, each returning PASS, PARTIAL, FAIL, or UNKNOWN against
            evidence. There is no aggregate score — a number would hide exactly the
            gap you need to see.
          </p>

          <div>
            {AOP_DONE.map(([criterion, result, test]) => (
              <div key={criterion} className="aop-done-row">
                <span style={{
                  fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 15,
                  fontWeight: 500, color: TEXT,
                }}>{criterion}</span>
                <span><DoneChip result={result} /></span>
                <span className="aop-done-test" style={{
                  fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 13.5,
                  lineHeight: 1.6, color: "rgba(232,232,239,0.45)",
                }}>{test}</span>
              </div>
            ))}
          </div>
        </div>

        {/* ── What it refuses to conflate ── */}
        <div style={{
          marginTop: 64, padding: "28px 30px",
          border: `1px solid ${HAIR}`, borderTop: "1px solid rgba(0,229,195,0.22)",
          borderRadius: 12, background: "rgba(13,13,16,0.55)",
          ...revealStyle(on, 260),
        }}>
          <p style={{
            fontFamily: "'IBM Plex Mono', monospace", fontSize: 10,
            letterSpacing: "0.14em", textTransform: "uppercase",
            color: "rgba(232,232,239,0.35)", marginBottom: 18,
          }}>What it refuses to conflate</p>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: "12px 34px" }}>
            {[
              "Observability is not operability.",
              "System health is not product success.",
              "A service topology is not a workflow map.",
              "Detecting failure is not recovery.",
              "An executable API is not a Safe Action.",
              "Telemetry alone is not a feedback loop.",
            ].map((t) => (
              <p key={t} style={{
                fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 14.5,
                lineHeight: 1.6, color: "rgba(232,232,239,0.62)", margin: 0,
              }}>
                <span style={{ color: "rgba(0,229,195,0.55)", marginRight: 9 }}>&#8212;</span>{t}
              </p>
            ))}
          </div>
        </div>

        {/* ── Closing CTA ── */}
        <div style={{
          marginTop: 72, paddingTop: 44, borderTop: `1px solid ${HAIR}`,
          display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: 32, flexWrap: "wrap", ...revealStyle(on, 300),
        }}>
          <p style={{
            fontFamily: "'IBM Plex Sans', sans-serif",
            fontSize: "clamp(16px, 1.4vw, 20px)", lineHeight: 1.55,
            color: TEXT, margin: 0, maxWidth: "46ch", fontWeight: 500,
          }}>
            The assessment tells you which primitives your product cannot express.
            Building them is the engagement.
          </p>
          <div className="aop-audit-btns" style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
            <a className="aop-btn-primary" href="/fde#fde-cta" aria-label="Build an AI-Operable Product with Formative Labs">
              Build an AI-Operable Product
            </a>
            <InstallSkillCTA />
          </div>
        </div>

      </div>
    </section>
  );
}

// ── Register sections ─────────────────────────────────────────────────────────
window.FormativeSite.sections = window.FormativeSite.sections || {};
window.FormativeSite.sections["aopHero"]  = ()  => <AopHero />;
window.FormativeSite.sections["aopSkill"] = ()  => <AopSkill />;