// Constraints grid — 6 feature cells with subtle hover animations
// and tiny inline visualizations in each card.
const { useState: useStateCs } = React;

function MiniViz({ kind }) {
  // Small decorative, animated SVG per card
  switch (kind) {
    case "deterministic":
      return (
        <svg width="56" height="56" viewBox="0 0 56 56" aria-hidden>
          <g stroke="var(--amber)" strokeWidth="1" fill="none" opacity="0.85">
            <rect x="6" y="6" width="44" height="44" rx="2" />
            <rect x="12" y="12" width="32" height="32" rx="1" opacity="0.5" />
            <rect x="18" y="18" width="20" height="20" rx="1" opacity="0.3" />
          </g>
          <circle cx="28" cy="28" r="2" fill="var(--amber)">
            <animate attributeName="opacity" values="0.4;1;0.4" dur="2s" repeatCount="indefinite"/>
          </circle>
        </svg>
      );
    case "identity":
      return (
        <svg width="56" height="56" viewBox="0 0 56 56" aria-hidden>
          <g stroke="var(--amber)" strokeWidth="1" fill="none">
            <circle cx="28" cy="20" r="7"/>
            <path d="M14 46 Q 28 34 42 46"/>
            <circle cx="28" cy="20" r="10" opacity="0.3">
              <animate attributeName="r" values="10;14;10" dur="2.5s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.3;0;0.3" dur="2.5s" repeatCount="indefinite"/>
            </circle>
          </g>
        </svg>
      );
    case "sandbox":
      return (
        <svg width="56" height="56" viewBox="0 0 56 56" aria-hidden>
          <g stroke="var(--amber)" strokeWidth="1" fill="none">
            <rect x="8" y="8" width="40" height="40" rx="3" strokeDasharray="3 2"/>
            <rect x="20" y="20" width="16" height="16" rx="1" fill="var(--amber)" fillOpacity="0.15"/>
          </g>
        </svg>
      );
    case "slack":
      return (
        <svg width="56" height="56" viewBox="0 0 56 56" aria-hidden>
          <g stroke="var(--amber)" strokeWidth="1" fill="none">
            <path d="M8 20 L20 20 L24 16 L40 16"/>
            <path d="M8 36 L20 36 L24 40 L40 40"/>
            <circle cx="42" cy="16" r="3" fill="var(--amber)"/>
            <circle cx="42" cy="40" r="3" fill="var(--amber)" opacity="0.4"/>
          </g>
        </svg>
      );
    case "report":
      return (
        <svg width="56" height="56" viewBox="0 0 56 56" aria-hidden>
          <g stroke="var(--amber)" strokeWidth="1" fill="none">
            <rect x="14" y="8" width="28" height="40" rx="1"/>
            <line x1="20" y1="18" x2="36" y2="18"/>
            <line x1="20" y1="24" x2="32" y2="24"/>
            <line x1="20" y1="30" x2="36" y2="30"/>
            <line x1="20" y1="36" x2="28" y2="36"/>
          </g>
        </svg>
      );
    case "framework":
      return (
        <svg width="56" height="56" viewBox="0 0 56 56" aria-hidden>
          <g stroke="var(--amber)" strokeWidth="1" fill="none">
            <circle cx="28" cy="28" r="4" fill="var(--amber)" fillOpacity="0.6"/>
            <circle cx="12" cy="12" r="3"/>
            <circle cx="44" cy="12" r="3"/>
            <circle cx="12" cy="44" r="3"/>
            <circle cx="44" cy="44" r="3"/>
            <line x1="15" y1="15" x2="25" y2="25"/>
            <line x1="41" y1="15" x2="31" y2="25"/>
            <line x1="15" y1="41" x2="25" y2="31"/>
            <line x1="41" y1="41" x2="31" y2="31"/>
          </g>
        </svg>
      );
  }
  return null;
}

function ConstraintCard({ title, body, kind }) {
  const [hover, setHover] = useStateCs(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: "relative",
        border: "1px solid var(--line)",
        borderRadius: 8,
        padding: 28,
        background: hover
          ? "linear-gradient(180deg, rgba(20,18,14,0.75), rgba(10,10,12,0.5))"
          : "linear-gradient(180deg, rgba(14,14,16,0.5), rgba(8,8,10,0.3))",
        transition: "all .25s ease",
        transform: hover ? "translateY(-2px)" : "translateY(0)",
        borderColor: hover ? "oklch(0.82 0.14 75 / 0.5)" : "var(--line)",
        overflow: "hidden",
      }}
    >
      <div style={{ marginBottom: 18 }}>
        <MiniViz kind={kind} />
      </div>
      <h3 style={{ fontSize: 17, fontWeight: 600, margin: "0 0 10px", letterSpacing: "-0.01em" }}>
        {title}
      </h3>
      <p style={{ fontSize: 13.5, color: "var(--text-dim)", lineHeight: 1.6, margin: 0 }}>
        {body}
      </p>
      <div
        aria-hidden
        style={{
          position: "absolute",
          bottom: 0, left: 0, right: 0,
          height: 2,
          background: "var(--amber)",
          transform: hover ? "scaleX(1)" : "scaleX(0)",
          transformOrigin: "left",
          transition: "transform .4s ease",
        }}
      />
    </div>
  );
}

function Constraints() {
  const items = [
    { kind: "deterministic", title: "Deterministic policy enforcement",
      body: "Same inputs always yield the same allow, deny, or escalate — no LLM in the policy path." },
    { kind: "identity", title: "Zero-trust agent identity",
      body: "Cryptographic identity for every agent instance, tool caller, and downstream action." },
    { kind: "sandbox", title: "Execution sandboxing",
      body: "Scope filesystem, network, and side effects per policy before anything leaves the boundary." },
    { kind: "slack", title: "Slack approval routing for escalations",
      body: "Route high-risk actions to humans with full context and immutable decision records." },
    { kind: "report", title: "Compliance report export",
      body: "Structured audit artifacts your legal team can hand to any regulator, framework, or auditor without a scramble." },
    { kind: "framework", title: "Framework auto-detection",
      body: "Detect LangChain, CrewAI, and common stacks — apply sane defaults without ceremony." },
  ];
  return (
    <section
      id="constraints"
      style={{
        padding: "120px 28px",
        borderBottom: "1px solid var(--line)",
        position: "relative",
      }}
    >
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div
          className="mono"
          style={{
            fontSize: 10,
            letterSpacing: "0.3em",
            color: "var(--text-faint)",
            textTransform: "uppercase",
            marginBottom: 16,
          }}
        >
          ▸ The details
        </div>
        <h2
          style={{
            fontSize: 48,
            margin: "0 0 50px",
            letterSpacing: "-0.02em",
            fontWeight: 600,
            lineHeight: 1.1,
          }}
        >
          Built for production<br />constraints.
        </h2>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 20,
          }}
        >
          {items.map((it) => <ConstraintCard key={it.title} {...it} />)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Constraints, ConstraintCard });