/* =========================================================
   Section 4 — Pluggable transition triggers.
   zkTLS is the lead card. Other triggers shown as peers.
   ========================================================= */
function TriggersSection({ asSubsection = false }) {
  const triggers = [
    {
      id: "zktls",
      lead: true,
      kind: "zkTLS proof",
      partner: "Primus Labs",
      title: "Release on a verified fact from the open web.",
      body:
        "Primus zkTLS lets a client prove the content of an HTTPS response without revealing the session. A phase can release when a Steam trade lands, a GitHub PR merges, an exchange fill clears, or a calendar event occurs. The bridge between off-chain truth and decentralized execution.",
      examples: [
        "Steam trade contains item X",
        "GitHub PR #1947 is merged",
        "X account @id follows @target",
      ],
    },
    {
      id: "sig",
      kind: "Signature",
      partner: "EIP-712 / Aztec keys",
      title: "Release when an arbiter signs off.",
      body:
        "Multisig sign-off, designated arbiter, attested oracle. Cheap and well understood. Good for milestone escrows where a trusted-but-not-omniscient party verifies delivery.",
      examples: ["delivery accepted by client", "milestone signed by reviewer"],
    },
    {
      id: "oracle",
      kind: "Oracle",
      partner: "Chainlink / RedStone / Pyth",
      title: "Release on a published feed value.",
      body:
        "Pull a price, an index, or a custom feed and gate the transition on a predicate. Works wherever the data already lives on-chain through a trusted publisher.",
      examples: ["ETH/USD < strike", "weather index above threshold"],
    },
    {
      id: "time",
      kind: "Time lock",
      partner: "Block / wall clock",
      title: "Release after a deadline passes.",
      body:
        "Default exit for any unresolved escrow. Use it as a safety net for the other triggers, not as the primary release path on its own.",
      examples: ["48h since locked", "after block N"],
    },
    {
      id: "event",
      kind: "On-chain event",
      partner: "Aztec or Ethereum",
      title: "Release when another contract fires.",
      body:
        "Listen for an emitted event on Aztec or on Ethereum L1. Useful for cross-protocol coordination: vault matures, governance proposal passes, NFT transfers.",
      examples: ["GovernorPassed(id)", "VaultMatured(epoch)"],
    },
  ];

  const Wrapper = asSubsection ? "div" : "section";
  const wrapperProps = asSubsection
    ? {
        style: {
          background: "var(--az-malachite)",
          color: "var(--az-parchment)",
          padding: "56px 40px",
          marginTop: 24,
          marginBottom: 24,
        },
      }
    : {
        id: "triggers",
        "data-screen-label": "Pluggable transition triggers",
        "data-surface": "dark",
        style: {
          background: "var(--az-malachite)",
          color: "var(--az-parchment)",
          padding: "120px 40px",
          borderTop: "1px solid rgba(242,238,225,0.12)",
        },
      };

  return (
    <Wrapper {...wrapperProps}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionHead
          number="04"
          color="dark"
          label="Pluggable triggers"
          title={asSubsection ? "Pluggable triggers." : "The Kit doesn't pick the trigger. You do."}
          sub="Any verifiable predicate works. zkTLS is the unique unlock because it pulls verified facts from the open web into a private on-chain escrow."
          asSubsection={asSubsection}
        />

        <div
          style={{
            marginTop: 64,
            display: "grid",
            gridTemplateColumns: "1.6fr 1fr 1fr",
            gridAutoRows: "min-content",
            gap: 16,
          }}
          className="trigger-grid"
        >
          {triggers.map((t) => (
            <TriggerCard key={t.id} t={t} lead={t.lead} />
          ))}
        </div>
      </div>
    </Wrapper>
  );
}

function TriggerCard({ t, lead }) {
  const [hover, setHover] = useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        gridColumn: "span 1",
        gridRow: lead ? "span 2" : "span 1",
        background: lead
          ? (hover ? "var(--az-chartreuse)" : "var(--az-aubergine)")
          : (hover ? "var(--az-aubergine-2)" : "rgba(242,238,225,0.04)"),
        color: lead && hover ? "var(--az-ink)" : "var(--az-parchment)",
        border: lead
          ? "1px solid var(--az-chartreuse-deep)"
          : "1px solid rgba(242,238,225,0.22)",
        padding: lead ? "36px 36px 32px" : "28px 26px 24px",
        display: "flex",
        flexDirection: "column",
        gap: lead ? 24 : 18,
        minHeight: lead ? 420 : 200,
        transition: "background 200ms linear, color 200ms linear",
        position: "relative",
        overflow: "hidden",
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12, flexWrap: "wrap" }}>
        <div
          style={{
            fontFamily: "var(--ff-display-alt)",
            fontSize: lead ? 13 : 11,
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            color: lead && hover ? "var(--az-ink)" : "var(--az-chartreuse)",
          }}
        >
          {t.kind}
        </div>
        <div
          style={{
            fontFamily: "var(--ff-display-alt)",
            fontSize: 10,
            letterSpacing: "0.06em",
            opacity: 0.6,
            textTransform: "uppercase",
            color: lead && hover ? "var(--az-ink)" : "var(--az-parchment)",
          }}
        >
          {t.partner}
        </div>
      </div>

      <h3
        style={{
          margin: 0,
          fontFamily: "ABC Arizona Serif, Georgia, serif",
          fontWeight: 300,
          fontStyle: lead ? "italic" : "normal",
          fontSize: lead ? "clamp(32px, 3vw, 44px)" : 22,
          lineHeight: 1,
          letterSpacing: "-0.03em",
          color: lead && hover ? "var(--az-ink)" : "var(--az-parchment)",
        }}
      >
        {t.title}
      </h3>

      <p
        style={{
          margin: 0,
          fontFamily: "var(--ff-serif)",
          fontWeight: 300,
          fontSize: lead ? 17 : 14,
          lineHeight: 1.5,
          color: lead && hover
            ? "var(--az-ink-soft)"
            : (lead ? "rgba(242,238,225,0.82)" : "rgba(242,238,225,0.72)"),
        }}
      >
        {t.body}
      </p>

      <div style={{ marginTop: "auto" }}>
        <div
          style={{
            fontFamily: "var(--ff-display-alt)",
            fontSize: 10,
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            color: lead && hover ? "var(--az-ink-soft)" : "rgba(242,238,225,0.55)",
            marginBottom: 8,
          }}
        >
          Example predicates
        </div>
        <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
          {t.examples.map((e, i) => {
            const itemColor = lead && hover
              ? "var(--az-ink)"
              : (lead ? "var(--az-parchment)" : "rgba(242,238,225,0.85)");
            const markerColor = lead && hover
              ? "var(--az-ink-soft)"
              : (lead ? "var(--az-chartreuse)" : "rgba(242,238,225,0.45)");
            return (
              <li
                key={i}
                style={{
                  fontFamily: "var(--ff-mono)",
                  fontSize: lead ? 13 : 11.5,
                  color: itemColor,
                  letterSpacing: "-0.005em",
                  paddingLeft: 16,
                  position: "relative",
                  lineHeight: 1.4,
                }}
              >
                <span
                  style={{
                    position: "absolute",
                    left: 0,
                    top: "0.55em",
                    width: 8,
                    height: 1,
                    background: markerColor,
                  }}
                />
                {e}
              </li>
            );
          })}
        </ul>
      </div>

      {lead && (
        <div
          style={{
            position: "absolute",
            top: 20,
            right: 20,
            opacity: 0.16,
            color: hover ? "var(--az-ink)" : "var(--az-chartreuse)",
          }}
        >
          <BrandMark size={80} />
        </div>
      )}
    </article>
  );
}

/* =========================================================
   Section 5 — Privacy model: private / disclosed / public.
   ========================================================= */
function PrivacyModelSection() {
  const cols = [
    {
      key: "private",
      label: "Private",
      caption: "Never leaves the encrypted state tree.",
      glyph: "private",
      items: [
        "Escrow balances and amounts.",
        "Party identities, until a match is made.",
        "Withdrawal destinations at settle.",
        "Any field your phase definition marks private.",
      ],
      tone: "default",
    },
    {
      key: "disclosed",
      label: "Selectively disclosed",
      caption: "Revealed only to the party you choose, at the phase you choose.",
      glyph: "disclosed",
      items: [
        "The counterparty’s identifier, revealed only at Lock.",
        "The fact named inside the proof; the session stays sealed.",
        "Any field you scope to a phase or to a role.",
      ],
      tone: "accent",
    },
    {
      key: "public",
      label: "Public",
      caption: "Only what verification requires. You pick what else lives here.",
      glyph: "public",
      items: [
        "That a transition fired, and at what block.",
        "Which verifier ran, and that it accepted.",
        "Anything your app deliberately surfaces.",
      ],
      tone: "default",
    },
  ];

  return (
    <section
      id="privacy"
      data-screen-label="Privacy model"
      style={{
        background: "var(--az-parchment)",
        padding: "120px 40px",
        borderTop: "1px solid rgba(26,20,0,0.12)",
      }}
    >
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionHead
          number="05"
          label="The privacy model"
          title="Privacy you author."
          sub="Not all-or-nothing. Three layers of disclosure; you decide what each one holds, phase by phase."
        />

        <div
          style={{
            marginTop: 64,
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 0,
            border: "1px solid var(--az-ink)",
          }}
          className="privacy-grid"
        >
          {cols.map((c, i) => (
            <div
              key={c.key}
              style={{
                padding: "40px 32px 36px",
                background: c.tone === "accent" ? "var(--az-chartreuse-tint)" : "var(--az-parchment-2)",
                borderRight: i < cols.length - 1 ? "1px solid var(--az-ink)" : "none",
                display: "flex",
                flexDirection: "column",
                gap: 20,
              }}
            >
              <PrivacyGlyph kind={c.glyph} />
              <div>
                <div
                  style={{
                    fontFamily: "var(--ff-display-alt)",
                    fontSize: 12,
                    letterSpacing: "0.08em",
                    textTransform: "uppercase",
                    color: "var(--az-stone)",
                    marginBottom: 6,
                  }}
                >
                  Layer 0{i + 1}
                </div>
                <h3
                  style={{
                    margin: 0,
                    fontFamily: "ABC Arizona Serif, Georgia, serif",
                    fontWeight: 300,
                    fontStyle: c.tone === "accent" ? "italic" : "normal",
                    fontSize: 38,
                    lineHeight: 1,
                    letterSpacing: "-0.03em",
                    color: "var(--az-ink)",
                  }}
                >
                  {c.label}
                </h3>
              </div>
              <p
                style={{
                  margin: 0,
                  fontFamily: "var(--ff-serif)",
                  fontSize: 15,
                  lineHeight: 1.45,
                  color: "var(--az-ink)",
                }}
              >
                {c.caption}
              </p>
              <ul
                style={{
                  margin: 0,
                  padding: 0,
                  listStyle: "none",
                  display: "flex",
                  flexDirection: "column",
                  gap: 12,
                  marginTop: 8,
                  borderTop: "1px solid var(--az-ink)",
                  paddingTop: 16,
                }}
              >
                {c.items.map((it, j) => (
                  <li
                    key={j}
                    style={{
                      fontFamily: "var(--ff-sans)",
                      fontWeight: 500,
                      fontSize: 14,
                      lineHeight: 1.5,
                      color: "var(--az-ink)",
                      display: "flex",
                      gap: 10,
                    }}
                  >
                    <span
                      style={{
                        width: 6,
                        height: 6,
                        background: "var(--az-ink)",
                        marginTop: 8,
                        transform: "rotate(45deg)",
                        flexShrink: 0,
                      }}
                    />
                    <span>{it}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div
          style={{
            marginTop: 24,
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            gap: 16,
            flexWrap: "wrap",
          }}
        >
          <p
            style={{
              fontFamily: "var(--ff-serif)",
              fontStyle: "italic",
              fontSize: 16,
              lineHeight: 1.5,
              color: "var(--az-stone)",
              maxWidth: 720,
              margin: 0,
            }}
          >
            Privacy unlocks coordination patterns transparent chains can’t support.
            Selective disclosure is the lever. You pull it.
          </p>
          <a
            href="#docs-privacy"
            style={{
              fontFamily: "var(--ff-sans)",
              fontWeight: 500,
              fontSize: 13,
              color: "var(--az-ink)",
              textDecoration: "none",
              borderBottom: "1px solid var(--az-ink)",
              paddingBottom: 2,
            }}
          >
            Privacy model in depth →
          </a>
        </div>
      </div>
    </section>
  );
}

function PrivacyGlyph({ kind }) {
  const ink = "var(--az-ink)";
  if (kind === "private") {
    return (
      <svg width="56" height="56" viewBox="0 0 56 56">
        <rect x={0.5} y={0.5} width={55} height={55} fill="none" stroke={ink} />
        <path d="M28 4 L52 28 L28 52 L4 28 Z" fill={ink} />
        <path d="M28 14 L42 28 L28 42 L14 28 Z" fill="var(--az-parchment-2)" />
        <path d="M28 22 L34 28 L28 34 L22 28 Z" fill={ink} />
      </svg>
    );
  }
  if (kind === "disclosed") {
    return (
      <svg width="56" height="56" viewBox="0 0 56 56">
        <defs>
          <clipPath id="leftHalf">
            <rect x={0} y={0} width={28} height={56} />
          </clipPath>
        </defs>
        <rect x={0.5} y={0.5} width={55} height={55} fill="none" stroke={ink} />
        <path d="M28 4 L52 28 L28 52 L4 28 Z" fill="var(--az-chartreuse)" stroke={ink} />
        <path d="M28 4 L52 28 L28 52 L4 28 Z" fill={ink} clipPath="url(#leftHalf)" />
        <line x1={28} y1={4} x2={28} y2={52} stroke="var(--az-chartreuse-tint)" strokeWidth={1} strokeDasharray="2 2" />
      </svg>
    );
  }
  return (
    <svg width="56" height="56" viewBox="0 0 56 56">
      <rect x={0.5} y={0.5} width={55} height={55} fill="none" stroke={ink} />
      <path d="M28 4 L52 28 L28 52 L4 28 Z" fill="none" stroke={ink} strokeWidth={1.5} />
      <path d="M28 16 L40 28 L28 40 L16 28 Z" fill="none" stroke={ink} strokeWidth={1} />
      <circle cx={28} cy={28} r={3} fill={ink} />
    </svg>
  );
}

window.TriggersSection = TriggersSection;
window.PrivacyModelSection = PrivacyModelSection;