/* =========================================================
   Restructure containers — BAZaarSection / KitSection /
   OtherSection. Each is a chapter wrapper that composes the
   existing section components in asSubsection mode.
   ========================================================= */

/* =========================================================
   BAZaar — full chapter. Promoted out of the PoC row.
   Anatomy per audience-mix: What it is / How the trade
   settles / Why it matters. PoC status as a footnote.
   ========================================================= */
function BAZaarSection() {
  return (
    <section
      id="bazaar"
      data-screen-label="BAZaar"
      style={{
        background: "var(--az-parchment)",
        padding: "120px 40px 0",
        borderTop: "1px solid rgba(26,20,0,0.12)",
      }}
    >
      <div style={{ maxWidth: 1180, margin: "0 auto" }}>
        <SlideProposition />
        <SlideSeparator />
        <SlideWhyThisMarket />
        <SlideSeparator />
        <SlideHowOneTrade />
      </div>
      <SlideColophon />
    </section>
  );
}

function SlideSeparator() {
  return (
    <div
      aria-hidden="true"
      style={{
        margin: "80px auto",
        width: 96,
        height: 1,
        background: "var(--az-ink)",
        opacity: 0.5,
      }}
    />
  );
}

function SlideEyebrow({ label }) {
  return (
    <div
      style={{
        fontFamily: "var(--ff-display-alt)",
        fontSize: 11,
        letterSpacing: "0.1em",
        textTransform: "uppercase",
        color: "var(--az-ink-soft)",
      }}
    >
      {label}
    </div>
  );
}

function SlideProposition() {
  return (
    <div style={{ maxWidth: 1000 }}>
      <SectionHead
        number="02"
        label="Live demo"
        title="A private marketplace, released by a proof of the trade."
      />
      <div style={{ marginTop: 40, display: "flex", flexDirection: "column", gap: 22 }}>
        <p
          style={{
            margin: 0,
            fontFamily: "var(--ff-serif)",
            fontWeight: 300,
            fontSize: 19,
            lineHeight: 1.6,
            color: "var(--az-ink)",
          }}
        >
          BAZaar is a peer-to-peer marketplace for trading Team Fortress 2
          unusual cosmetics, with stablecoins settling privately on Aztec while the
          unusual itself moves through Steam's regular player-to-player trade.
        </p>
        <p
          style={{
            margin: 0,
            fontFamily: "var(--ff-serif)",
            fontWeight: 300,
            fontSize: 19,
            lineHeight: 1.6,
            color: "var(--az-ink)",
          }}
        >
          The Foundation built BAZaar to test a single proposition: that a
          private marketplace, settled on Aztec and released by a zero-knowledge
          proof of an off-chain event, can replace the broker-and-vouch
          coordination that TF2 collectors live with today. The sections below
          walk through what shipped, how the trade settles, what was proved,
          and where the work goes next.
        </p>
        <p
          style={{
            margin: 0,
            fontFamily: "var(--ff-serif)",
            fontWeight: 300,
            fontSize: 17,
            lineHeight: 1.55,
            color: "var(--az-ink-soft)",
          }}
        >
          BAZaar is live on Aztec at{" "}
          <a
            href="https://escrow.aztec.network/bazaar"
            style={{ color: "var(--az-ink)", borderBottom: "1px solid var(--az-ink)", textDecoration: "none" }}
          >
            escrow.aztec.network/bazaar
          </a>
          . The catalog is seeded by the Foundation; the listing-creation flow
          is gated for the proof-of-concept. The execution is peer-to-peer
          and the repository is open source and forkable.
        </p>
      </div>
    </div>
  );
}

function SlideWhyThisMarket() {
  return (
    <div style={{ maxWidth: 1180 }}>
      <SlideEyebrow label="Why this market" />
      <h3
        style={{
          margin: "26px 0 0",
          fontFamily: "var(--ff-display)",
          fontWeight: 300,
          fontSize: "clamp(32px, 4.2vw, 52px)",
          lineHeight: 1.05,
          letterSpacing: "-0.035em",
          color: "var(--az-ink)",
          maxWidth: 1000,
        }}
      >
        In this market, settlement still depends on a broker.
      </h3>
      <div
        style={{
          marginTop: 30,
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.15fr) minmax(280px, 0.85fr)",
          gap: 56,
          alignItems: "flex-start",
        }}
        className="hero-grid"
      >
        <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
          <p
            style={{
              margin: 0,
              fontFamily: "var(--ff-serif)",
              fontWeight: 300,
              fontSize: 18,
              lineHeight: 1.6,
              color: "var(--az-ink)",
            }}
          >
            Today, trading a high-value Team Fortress 2 unusual works through a
            tax of social coordination. The listing goes up on a Backpack.tf
            thread, the buyer surfaces in a Discord server, and both parties
            route the deal through a middleman who claims to be a Backpack.tf
            admin or claims to be vouched by one. Sometimes they are. Sometimes
            they impersonate the people they claim to represent, and a
            sophisticated seller wakes up to find their Steam account drained
            and their inventory gone.
          </p>
          <p
            style={{
              margin: 0,
              fontFamily: "var(--ff-serif)",
              fontWeight: 300,
              fontSize: 18,
              lineHeight: 1.6,
              color: "var(--az-ink-soft)",
            }}
          >
            The escrow that holds these deals together is built on social trust
            and screenshots. It works until it doesn't. BAZaar replaces that
            stack with a private escrow on Aztec, released by a zero-knowledge
            proof of the trade itself. The person in the middle disappears,
            because the verifying event was never theirs to control.
          </p>
        </div>
        <TrustSurfaceCard />
      </div>
    </div>
  );
}

function TrustSurfaceCard() {
  return (
    <aside
      style={{
        border: "1px solid var(--az-ink)",
        background: "var(--az-parchment-2)",
        display: "grid",
        gridTemplateRows: "auto auto",
      }}
    >
      <div style={{ padding: "22px 22px 22px", borderBottom: "1px solid var(--az-ink)" }}>
        <div
          style={{
            fontFamily: "var(--ff-display-alt)",
            fontSize: 10,
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            color: "var(--az-stone)",
            marginBottom: 10,
          }}
        >
          Today
        </div>
        <p
          style={{
            margin: 0,
            fontFamily: "var(--ff-serif)",
            fontWeight: 300,
            fontSize: 14.5,
            lineHeight: 1.6,
            color: "var(--az-ink-soft)",
          }}
        >
          Listing, matching, escrow, and verification are split across separate
          social surfaces today, each adding another place where trust has to
          be borrowed.
        </p>
      </div>
      <div style={{ padding: "22px 22px 24px", background: "var(--az-chartreuse-tint)" }}>
        <div
          style={{
            fontFamily: "var(--ff-display-alt)",
            fontSize: 10,
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            color: "var(--az-ink-soft)",
            marginBottom: 10,
          }}
        >
          BAZaar
        </div>
        <p
          style={{
            margin: 0,
            fontFamily: "var(--ff-serif)",
            fontWeight: 300,
            fontSize: 14.5,
            lineHeight: 1.6,
            color: "var(--az-ink)",
          }}
        >
          One private escrow on Aztec, released by a zero-knowledge proof of
          the Steam trade itself. The handoffs collapse into a single
          verifiable event.
        </p>
      </div>
    </aside>
  );
}

function SlideHowOneTrade() {
  const phases = [
    {
      num: "01",
      name: "Open",
      collector:
        "The seller posts a listing. BAZaar shows it only after the seller has proved, through Steam itself, that they own the unusual. A listing that cannot prove ownership does not appear in the catalog.",
      developer:
        "Listings carry a zero-knowledge proof against Steam's public inventory endpoint. The contract verifies the proof at publish-time; ownership is a precondition for visibility.",
    },
    {
      num: "02",
      name: "Locked",
      collector:
        "You commit. Your stablecoins sit in escrow on Aztec, out of public view. You hand the seller a Steam ID where the unusual should land, and only the matched seller sees it.",
      developer:
        "Stablecoins enter a private escrow note. The buyer's Steam ID is selectively disclosed to the matched seller through Aztec's private-state primitives. Outside parties see that a transition fired; they do not see the parties or the amount.",
      accent: true,
    },
    {
      num: "03",
      name: "Released",
      collector:
        "The seller sends the unusual through Steam. A proof of that trade goes on-chain, and the seller is paid when the proof lands, without requiring a broker or a social vouch.",
      developer:
        "Either party submits a Primus zkTLS proof drawn from Steam's trade-offers API. The on-chain verifier accepts the proof and releases the escrow to the seller's private balance. Withdrawal destination stays private.",
    },
    {
      num: "03b",
      name: "Refunded",
      collector:
        "If the trade does not happen, you get your stablecoins back. Forty-eight hours after you locked them, you can withdraw without anyone's permission.",
      developer:
        "Timeout fires at lock + 48h. Buyer-initiated withdrawal returns the escrow. One condition covers every failure path, because no Accepted state on Steam means no proof can be generated in the first place.",
      muted: true,
    },
  ];

  return (
    <div style={{ maxWidth: 1180 }}>
      <SlideEyebrow label="How the trade settles" />
      <h3
        style={{
          margin: "26px 0 0",
          fontFamily: "var(--ff-display)",
          fontWeight: 300,
          fontSize: "clamp(32px, 4.2vw, 52px)",
          lineHeight: 1.05,
          letterSpacing: "-0.035em",
          color: "var(--az-ink)",
          maxWidth: 1000,
        }}
      >
        How the trade settles.
      </h3>
      <p
        style={{
          margin: "26px 0 0",
          fontFamily: "var(--ff-serif)",
          fontWeight: 300,
          fontSize: 18,
          lineHeight: 1.6,
          color: "var(--az-ink)",
          maxWidth: 880,
        }}
      >
        BAZaar moves the value side of the trade off Steam and onto Aztec, and
        organizes the deal as a four-phase escrow. The same trade reads two
        ways: as a safer collector flow on the left, and as a reusable
        settlement pattern on the right.
      </p>

      <div
        style={{
          marginTop: 40,
          border: "1px solid var(--az-ink)",
        }}
      >
        <PhaseTableHeader />
        {phases.map((p, i) => (
          <PhaseTableRow key={p.num} phase={p} isLast={i === phases.length - 1} />
        ))}
      </div>

      <p
        style={{
          margin: "48px 0 0",
          fontFamily: "var(--ff-serif)",
          fontWeight: 300,
          fontSize: 17,
          lineHeight: 1.6,
          color: "var(--az-ink-soft)",
          maxWidth: 880,
        }}
      >
        The same shape applies elsewhere. Wherever an asset is private and the
        verifying event is public, the Kit composes into a private settlement
        with a proof-driven release. Other Steam-tradable games. Roblox
        limiteds. Coordination patterns that today still depend on a person in
        the middle.
      </p>
    </div>
  );
}

function PhaseTableHeader() {
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "180px minmax(0, 1fr) minmax(0, 1fr)",
        borderBottom: "1px solid var(--az-ink)",
        background: "var(--az-parchment-2)",
      }}
      className="phase-band"
    >
      <div style={{ padding: "12px 22px", borderRight: "1px solid var(--az-ink)" }}>
        <span
          style={{
            fontFamily: "var(--ff-display-alt)",
            fontSize: 10,
            letterSpacing: "0.1em",
            textTransform: "uppercase",
            color: "var(--az-stone)",
          }}
        >
          Phase
        </span>
      </div>
      <div style={{ padding: "12px 24px", borderRight: "1px solid var(--az-ink)" }}>
        <span
          style={{
            fontFamily: "var(--ff-display-alt)",
            fontSize: 10,
            letterSpacing: "0.1em",
            textTransform: "uppercase",
            color: "var(--az-stone)",
          }}
        >
          For the collector
        </span>
      </div>
      <div style={{ padding: "12px 24px" }}>
        <span
          style={{
            fontFamily: "var(--ff-display-alt)",
            fontSize: 10,
            letterSpacing: "0.1em",
            textTransform: "uppercase",
            color: "var(--az-stone)",
          }}
        >
          For the developer
        </span>
      </div>
    </div>
  );
}

function PhaseTableRow({ phase, isLast }) {
  const bg = phase.accent
    ? "var(--az-chartreuse-tint)"
    : phase.muted
    ? "var(--az-parchment-2)"
    : "var(--az-parchment)";
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "180px minmax(0, 1fr) minmax(0, 1fr)",
        borderBottom: isLast ? "none" : "1px solid var(--az-ink)",
        background: bg,
      }}
      className="phase-band"
    >
      <div
        style={{
          padding: "28px 22px",
          borderRight: "1px solid var(--az-ink)",
          display: "flex",
          flexDirection: "column",
          gap: 6,
          justifyContent: "center",
        }}
      >
        <div
          style={{
            fontFamily: "var(--ff-display-alt)",
            fontSize: 10,
            letterSpacing: "0.08em",
            color: "var(--az-ink-soft)",
            fontVariantNumeric: "tabular-nums",
          }}
        >
          Phase {phase.num}
        </div>
        <div
          style={{
            fontFamily: "ABC Arizona Serif, Georgia, serif",
            fontWeight: 300,
            fontStyle: phase.muted ? "italic" : "normal",
            fontSize: 32,
            lineHeight: 1.0,
            letterSpacing: "-0.03em",
            color: "var(--az-ink)",
          }}
        >
          {phase.name}
        </div>
      </div>
      <p
        style={{
          margin: 0,
          padding: "28px 24px",
          borderRight: "1px solid var(--az-ink)",
          fontFamily: "var(--ff-serif)",
          fontWeight: 300,
          fontSize: 15.5,
          lineHeight: 1.6,
          color: phase.muted ? "var(--az-stone)" : "var(--az-ink)",
        }}
      >
        {phase.collector}
      </p>
      <p
        style={{
          margin: 0,
          padding: "28px 24px",
          fontFamily: "var(--ff-serif)",
          fontWeight: 300,
          fontSize: 15.5,
          lineHeight: 1.6,
          color: phase.muted ? "var(--az-stone)" : "var(--az-ink-soft)",
        }}
      >
        {phase.developer}
      </p>
    </div>
  );
}

function SlideColophon() {
  return (
    <div
      style={{
        marginTop: 96,
        background: "var(--az-aubergine)",
        color: "var(--az-parchment)",
        padding: "72px 40px",
        position: "relative",
        overflow: "hidden",
      }}
    >
      <div style={{ maxWidth: 1180, margin: "0 auto", position: "relative", zIndex: 2 }}>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "minmax(0, 1.25fr) minmax(280px, 0.75fr)",
            gap: 56,
            alignItems: "flex-start",
          }}
          className="hero-grid"
        >
          <div>
            <div
              style={{
                fontFamily: "var(--ff-display-alt)",
                fontSize: 11,
                letterSpacing: "0.1em",
                textTransform: "uppercase",
                color: "var(--az-chartreuse)",
                marginBottom: 22,
              }}
            >
              Colophon · Note from the Foundation
            </div>
            <p
              style={{
                margin: 0,
                fontFamily: "var(--ff-display)",
                fontStyle: "italic",
                fontWeight: 300,
                fontSize: "clamp(28px, 3.4vw, 44px)",
                lineHeight: 1.15,
                letterSpacing: "-0.025em",
                color: "var(--az-chartreuse)",
                maxWidth: 720,
              }}
            >
              A public marketplace for private trades.
            </p>
            <p
              style={{
                marginTop: 28,
                marginBottom: 0,
                fontFamily: "var(--ff-serif)",
                fontWeight: 300,
                fontSize: 17,
                lineHeight: 1.6,
                color: "rgba(242,238,225,0.85)",
                maxWidth: 720,
              }}
            >
              BAZaar is a proof of concept, not a product the Foundation will
              maintain. The catalog is seeded by the team and the listing flow
              is gated while the demo runs. After launch, BAZaar stands as a
              reference for the next builder who wants a private marketplace
              settled on Aztec. Fork it, reshape the phases, ship the next one.
            </p>
          </div>
          <ColophonTryCard />
        </div>
      </div>
      <div
        aria-hidden="true"
        style={{
          position: "absolute",
          right: -50,
          bottom: -50,
          opacity: 0.06,
          color: "var(--az-chartreuse)",
          pointerEvents: "none",
          zIndex: 1,
        }}
      >
        <BrandMark size={260} />
      </div>
    </div>
  );
}

function ColophonTryCard() {
  return (
    <div
      style={{
        border: "1px solid rgba(242,238,225,0.28)",
        background: "rgba(0,0,0,0.22)",
        padding: "24px 24px",
        display: "flex",
        flexDirection: "column",
        gap: 16,
      }}
    >
      <div
        style={{
          fontFamily: "var(--ff-display-alt)",
          fontSize: 11,
          letterSpacing: "0.08em",
          textTransform: "uppercase",
          color: "var(--az-chartreuse)",
        }}
      >
        How to try it
      </div>
      <ol
        style={{
          margin: 0,
          padding: 0,
          listStyle: "none",
          display: "flex",
          flexDirection: "column",
          gap: 10,
        }}
      >
        {[
          "Redeem a gift code from Marketing.",
          "Open escrow.aztec.network/bazaar.",
          "Pick an unusual. Lock stablecoins. Provide Steam ID.",
        ].map((line, i) => (
          <li
            key={i}
            style={{
              display: "grid",
              gridTemplateColumns: "26px 1fr",
              gap: 10,
              alignItems: "baseline",
              fontFamily: "var(--ff-sans)",
              fontWeight: 500,
              fontSize: 13.5,
              color: "rgba(242,238,225,0.92)",
            }}
          >
            <span
              style={{
                fontFamily: "var(--ff-display-alt)",
                fontSize: 10,
                letterSpacing: "0.08em",
                color: "var(--az-chartreuse)",
                fontVariantNumeric: "tabular-nums",
              }}
            >
              {String(i + 1).padStart(2, "0")}
            </span>
            <span style={{ lineHeight: 1.45 }}>{line}</span>
          </li>
        ))}
      </ol>
      <CTA as="a" href="https://escrow.aztec.network/bazaar">
        Open the demo →
      </CTA>
    </div>
  );
}

function BAZaarCopyColumn() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
      <div
        style={{
          fontFamily: "var(--ff-display-alt)",
          fontSize: 12,
          letterSpacing: "0.08em",
          textTransform: "uppercase",
          color: "var(--az-stone)",
        }}
      >
        What it is
      </div>
      <p
        style={{
          margin: 0,
          fontFamily: "var(--ff-serif)",
          fontWeight: 300,
          fontSize: 19,
          lineHeight: 1.55,
          color: "var(--az-ink)",
          maxWidth: 560,
        }}
      >
        TF2 collectors trade unusual hats through Steam, but settlement runs through
        third-party brokers, Discord vouches, and middleman impersonation. BAZaar
        keeps the asset side on Steam and moves the value side off Steam, into
        private stablecoin escrow on Aztec. The trade releases when a zkTLS proof
        confirms the item moved to the buyer's bound Steam ID.
      </p>

      <div
        style={{
          marginTop: 24,
          fontFamily: "var(--ff-display-alt)",
          fontSize: 12,
          letterSpacing: "0.08em",
          textTransform: "uppercase",
          color: "var(--az-stone)",
        }}
      >
        How the trade settles
      </div>
      <ol
        style={{
          margin: 0,
          padding: 0,
          listStyle: "none",
          display: "flex",
          flexDirection: "column",
          gap: 10,
          counterReset: "step",
        }}
      >
        {[
          "Seller creates the listing. A zero-knowledge proof of Steam ownership runs before the listing goes live. Price set in stablecoins.",
          "Buyer locks stablecoins into escrow and provides the Steam ID for delivery. Only the matched seller sees it.",
          "Seller sends the unusual through Steam's regular trade. One-sided: the item goes to the buyer, nothing back.",
          "Either party submits a Primus zkTLS proof over Steam's trade-offers API showing the item moved to the buyer's Steam ID.",
          "Escrow releases on proof. Or refunds if 48 hours pass without one.",
        ].map((line, i) => (
          <li
            key={i}
            style={{
              display: "grid",
              gridTemplateColumns: "32px 1fr",
              gap: 14,
              alignItems: "flex-start",
            }}
          >
            <span
              style={{
                fontFamily: "var(--ff-display-alt)",
                fontSize: 11,
                letterSpacing: "0.08em",
                color: "var(--az-ink-soft)",
                paddingTop: 4,
                fontVariantNumeric: "tabular-nums",
              }}
            >
              {String(i + 1).padStart(2, "0")}
            </span>
            <span
              style={{
                fontFamily: "var(--ff-sans)",
                fontWeight: 500,
                fontSize: 15,
                lineHeight: 1.5,
                color: "var(--az-ink)",
              }}
            >
              {line}
            </span>
          </li>
        ))}
      </ol>
    </div>
  );
}

function BAZaarFlowColumn() {
  return (
    <div
      style={{
        background: "var(--az-parchment-2)",
        border: "1px solid var(--az-ink)",
        padding: "32px 28px",
        display: "flex",
        flexDirection: "column",
        gap: 18,
      }}
    >
      <div
        style={{
          fontFamily: "var(--ff-display-alt)",
          fontSize: 11,
          letterSpacing: "0.08em",
          textTransform: "uppercase",
          color: "var(--az-stone)",
        }}
      >
        BAZaar phase shape
      </div>
      <div
        style={{
          fontFamily: "var(--ff-mono)",
          fontSize: 13,
          lineHeight: 1.5,
          color: "var(--az-ink)",
          padding: "12px 14px",
          border: "1px solid var(--az-ink)",
          background: "var(--az-parchment)",
        }}
      >
        Open → Locked → Released | Refunded
      </div>

      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 0,
          border: "1px solid var(--az-ink)",
          marginTop: 8,
        }}
      >
        {[
          { k: "Trigger", v: "zkTLS proof", mono: false },
          { k: "Source", v: "Steam trade-offers API", mono: false },
          { k: "Timeout", v: "48h since lock", mono: false },
          { k: "Status", v: "Public launch", mono: false },
        ].map((c, i) => (
          <div
            key={c.k}
            style={{
              padding: "14px 16px",
              borderRight: i % 2 === 0 ? "1px solid var(--az-ink)" : "none",
              borderBottom: i < 2 ? "1px solid var(--az-ink)" : "none",
              background: i === 0 ? "var(--az-chartreuse-tint)" : "var(--az-parchment)",
            }}
          >
            <div
              style={{
                fontFamily: "var(--ff-display-alt)",
                fontSize: 10,
                letterSpacing: "0.08em",
                textTransform: "uppercase",
                color: "var(--az-stone)",
                marginBottom: 4,
              }}
            >
              {c.k}
            </div>
            <div
              style={{
                fontFamily: c.mono ? "var(--ff-mono)" : "var(--ff-sans)",
                fontWeight: 500,
                fontSize: c.mono ? 12 : 14,
                color: "var(--az-ink)",
              }}
            >
              {c.v}
            </div>
          </div>
        ))}
      </div>

      <p
        style={{
          margin: 0,
          fontFamily: "var(--ff-serif)",
          fontStyle: "italic",
          fontWeight: 300,
          fontSize: 15,
          lineHeight: 1.5,
          color: "var(--az-stone)",
          marginTop: 8,
        }}
      >
        One timeout covers both no-shows. If the trade never reaches Accepted,
        no proof can be generated, the timeout fires, the buyer refunds.
      </p>
    </div>
  );
}

function BAZaarWhyItMatters() {
  const points = [
    {
      label: "Crypto-native settlement",
      body: "Sellers receive stablecoins directly to their wallet. The unusual moves through Steam's regular player-to-player trade, which has no platform fee. No broker cut, no Discord middleman, no impersonation risk.",
    },
    {
      label: "Selective disclosure",
      body: "The buyer's Steam ID is private until the buyer locks funds, then revealed only to the matched seller. Never publicly correlated to the wallet.",
    },
    {
      label: "Proof at listing and at release",
      body: "A zero-knowledge proof of Steam ownership runs at listing time, so fake listings die before any escrow lock. A second proof of the trade itself triggers release. No confirmations, no arbiter, no trust-me.",
    },
    {
      label: "Zero stored credentials",
      body: "BAZaar never holds a Steam password, an API key, or a session cookie. Sellers prove ownership through a zero-knowledge attestation. Buyers point to a Steam ID and keep custody of the account end to end.",
    },
  ];
  return (
    <div
      style={{
        marginTop: 56,
        background: "var(--az-aubergine)",
        color: "var(--az-parchment)",
        padding: "48px 40px",
      }}
    >
      <div
        style={{
          fontFamily: "var(--ff-display-alt)",
          fontSize: 12,
          letterSpacing: "0.08em",
          textTransform: "uppercase",
          color: "var(--az-chartreuse)",
          marginBottom: 28,
        }}
      >
        Why it matters
      </div>
      <p
        style={{
          margin: 0,
          marginBottom: 36,
          fontFamily: "var(--ff-display)",
          fontStyle: "italic",
          fontWeight: 300,
          fontSize: "clamp(28px, 3.4vw, 44px)",
          lineHeight: 1.1,
          letterSpacing: "-0.025em",
          color: "var(--az-chartreuse)",
          maxWidth: 880,
        }}
      >
        Internet-native. Middleman-free.
      </p>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(2, 1fr)",
          gap: 32,
        }}
        className="hero-grid"
      >
        {points.map((p) => (
          <div key={p.label} style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <div
              style={{
                fontFamily: "var(--ff-display-alt)",
                fontSize: 11,
                letterSpacing: "0.08em",
                textTransform: "uppercase",
                color: "var(--az-chartreuse)",
              }}
            >
              {p.label}
            </div>
            <p
              style={{
                margin: 0,
                fontFamily: "var(--ff-serif)",
                fontWeight: 300,
                fontSize: 16,
                lineHeight: 1.55,
                color: "rgba(242,238,225,0.85)",
              }}
            >
              {p.body}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}

function BAZaarFootnote() {
  return (
    <p
      style={{
        marginTop: 32,
        marginBottom: 0,
        fontFamily: "var(--ff-serif)",
        fontStyle: "italic",
        fontWeight: 300,
        fontSize: 14,
        lineHeight: 1.55,
        color: "var(--az-stone)",
        maxWidth: 720,
      }}
    >
      Proof of concept. Foundation-seeded listings at launch. The code is
      peer-to-peer; the listing-creation flow is frontend-gated while the catalog
      bootstraps.
    </p>
  );
}

/* =========================================================
   KitSection — chapter wrapper that compresses the primitive
   into an intro, then runs Anatomy + Triggers + a slim
   privacy strip + Quickstart as sub-sections. Closes with
   the BD CTA.
   ========================================================= */
function KitSection() {
  return (
    <section
      id="kit"
      data-screen-label="The Escrow Kit"
      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="03"
          label="Build with the Kit"
          title="The Escrow Kit."
          sub="A skill for your coding agent to implement conditional private escrow on Aztec. Install it, describe the phases and release conditions, and let it write the Aztec smart contract. BAZaar is one expression of it. Yours can be the next."
        />

        <KitIntro />

        <AnatomySection asSubsection />

        <TriggersSection asSubsection />

        <KitPrivacyStrip />

        <QuickstartSection asSubsection />

        <KitCTAs />
      </div>
    </section>
  );
}

function KitIntro() {
  return (
    <div style={{ marginTop: 56 }}>
      <p
        style={{
          margin: 0,
          fontFamily: "var(--ff-display)",
          fontStyle: "italic",
          fontWeight: 300,
          fontSize: "clamp(24px, 2.6vw, 32px)",
          lineHeight: 1.2,
          letterSpacing: "-0.025em",
          color: "var(--az-ink-soft)",
          maxWidth: 820,
          marginBottom: 32,
        }}
      >
        A skill for private settlement on Aztec, not a single release ritual.
      </p>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.4fr) minmax(260px, 0.6fr)",
          gap: 56,
          alignItems: "flex-start",
        }}
        className="primitive-grid"
      >
        <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
          <p
            style={{
              margin: 0,
              fontFamily: "var(--ff-serif)",
              fontWeight: 300,
              fontSize: 19,
              lineHeight: 1.6,
              color: "var(--az-ink)",
            }}
          >
            The Escrow Kit is a skill you install so it can turn an escrow
            description into an Aztec smart contract. You describe the product,
            the phases of the application, and the condition that should
            release funds.
          </p>
          <p
            style={{
              margin: 0,
              fontFamily: "var(--ff-serif)",
              fontWeight: 300,
              fontSize: 18,
              lineHeight: 1.6,
              color: "var(--az-ink-soft)",
            }}
          >
            The skill knows the parts it needs: composable phases, trigger
            families, Aztec.nr primitives, selective disclosure, and proof
            verification. BAZaar was implemented with these. Another escrow,
            with different phases and different release logic, can be
            implemented the same way, then refined and shipped.
          </p>
        </div>
        <KitMarginNote />
      </div>
    </div>
  );
}

function KitMarginNote() {
  return (
    <aside
      style={{
        borderLeft: "1px solid var(--az-ink)",
        paddingLeft: 24,
        paddingTop: 4,
        paddingBottom: 4,
        display: "flex",
        flexDirection: "column",
        gap: 14,
      }}
    >
      <div
        style={{
          fontFamily: "var(--ff-display-alt)",
          fontSize: 10,
          letterSpacing: "0.08em",
          textTransform: "uppercase",
          color: "var(--az-stone)",
        }}
      >
        What the skill knows to verify
      </div>
      <p
        style={{
          margin: 0,
          fontFamily: "var(--ff-serif)",
          fontStyle: "italic",
          fontWeight: 300,
          fontSize: 14.5,
          lineHeight: 1.6,
          color: "var(--az-ink)",
        }}
      >
        The skill can model release against a zero-knowledge proof of an
        off-chain event, a signature from a designated party, an oracle
        reading, an emitted on-chain event, or a deadline that passes without
        resolution. More broadly, any verifiable predicate the chain can check
        can become the condition that releases the escrow.
      </p>
    </aside>
  );
}

function KitPrivacyStrip() {
  const cols = [
    {
      key: "private",
      label: "Private",
      caption: "Balances, party identities pre-match, withdrawal destinations.",
    },
    {
      key: "disclosed",
      label: "Selectively disclosed",
      caption: "Counterparty identifier revealed only to the matched party, only at Lock.",
      accent: true,
    },
    {
      key: "public",
      label: "Public",
      caption: "What verification requires: transition fired, proof accepted, block height.",
    },
  ];
  return (
    <div style={{ marginTop: 32, marginBottom: 32 }}>
      <div
        style={{
          fontFamily: "var(--ff-display-alt)",
          fontSize: 12,
          letterSpacing: "0.08em",
          textTransform: "uppercase",
          color: "var(--az-stone)",
          marginBottom: 18,
        }}
      >
        Privacy you control
      </div>
      <div
        style={{
          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: "20px 22px",
              background: c.accent ? "var(--az-chartreuse-tint)" : "var(--az-parchment-2)",
              borderRight: i < cols.length - 1 ? "1px solid var(--az-ink)" : "none",
            }}
          >
            <div
              style={{
                fontFamily: "ABC Arizona Serif, Georgia, serif",
                fontWeight: 300,
                fontStyle: c.accent ? "italic" : "normal",
                fontSize: 22,
                lineHeight: 1,
                letterSpacing: "-0.03em",
                color: "var(--az-ink)",
                marginBottom: 8,
              }}
            >
              {c.label}
            </div>
            <p
              style={{
                margin: 0,
                fontFamily: "var(--ff-serif)",
                fontSize: 14,
                lineHeight: 1.5,
                color: "var(--az-ink)",
              }}
            >
              {c.caption}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}

function KitCTAs() {
  return (
    <div style={{ marginTop: 48 }}>
      <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center" }}>
        <CTA as="a" href="#talk-to-us">
          Talk to our team →
        </CTA>
        <span
          style={{
            fontFamily: "var(--ff-serif)",
            fontStyle: "italic",
            fontSize: 15,
            color: "var(--az-stone)",
          }}
        >
          Integration support and design review for builders.
        </span>
      </div>
      <div
        style={{
          marginTop: 22,
          display: "flex",
          gap: 24,
          flexWrap: "wrap",
          alignItems: "center",
        }}
      >
        {[
          { label: "Fork BAZaar", href: "https://github.com/AztecProtocol/escrow-kit" },
          { label: "Read the docs", href: "https://docs.aztec.network" },
        ].map((l) => (
          <a
            key={l.label}
            href={l.href}
            style={{
              fontFamily: "var(--ff-sans)",
              fontWeight: 500,
              fontSize: 13,
              color: "var(--az-ink)",
              textDecoration: "none",
              borderBottom: "1px solid var(--az-ink)",
              paddingBottom: 2,
            }}
          >
            → {l.label}
          </a>
        ))}
      </div>
    </div>
  );
}

/* =========================================================
   OtherSection — chapter wrapper for everyone past BAZaar.
   PoC row (Warm + slot), Design Assistant, slimmer use-case
   grid, closes with "Use the skill" CTA.
   ========================================================= */
function OtherSection() {
  return (
    <section
      id="other"
      data-screen-label="Other ways to build"
      style={{
        background: "var(--az-parchment-2)",
        padding: "120px 40px",
        borderTop: "1px solid rgba(26,20,0,0.12)",
      }}
    >
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionHead
          number="04"
          label="What else"
          title="Other ways to build with the Kit."
          sub="BAZaar is one application of the Kit. Plenty more fit the same primitives. Here's what's underway and what's open for the next builder."
        />

        <PoCSection asSubsection />

        {/* Worked Example block (Aztec Escrow Skill demo) commented out — felt out of place. Restore by uncommenting. */}
        {/* <AssistantSection asSubsection /> */}
      </div>

      {/* Malachite interlude — full-width dark band wrapping UseCases */}
      <div
        style={{
          background: "var(--az-malachite)",
          color: "var(--az-parchment)",
          padding: "72px 40px 88px",
          marginTop: 64,
          position: "relative",
          overflow: "hidden",
        }}
      >
        <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative", zIndex: 2 }}>
          <p
            style={{
              margin: "0 0 28px",
              fontFamily: "var(--ff-display)",
              fontStyle: "italic",
              fontWeight: 300,
              fontSize: "clamp(24px, 2.8vw, 38px)",
              lineHeight: 1.15,
              letterSpacing: "-0.025em",
              color: "var(--az-chartreuse)",
              maxWidth: 880,
            }}
          >
            Any verifiable fact can release the escrow.
          </p>
          <UseCasesSection asSubsection dark featuredIdx={3} />
        </div>
        <div
          aria-hidden="true"
          style={{
            position: "absolute",
            right: -60,
            bottom: -60,
            opacity: 0.06,
            color: "var(--az-chartreuse)",
            pointerEvents: "none",
            zIndex: 1,
          }}
        >
          <BrandMark size={260} />
        </div>
      </div>

    </section>
  );
}

window.BAZaarSection = BAZaarSection;
window.KitSection = KitSection;
window.OtherSection = OtherSection;
