import Link from "next/link";

export default function MarketTrustPage() {
  return (
    <div className="space-y-10 font-mono text-[#c8ffd8]">
      <header>
        <p className="text-[10px] uppercase tracking-[0.45em] text-[#00ff41]/45">Layer 3 · settlement</p>
        <h1 className="mt-2 text-2xl font-black tracking-tight text-[#7af598] md:text-3xl">Trust, escrow &amp; keys</h1>
        <p className="mt-3 max-w-3xl text-sm leading-relaxed text-[#5a8f6a]">
          Buyers should never wonder which “plugin” holds their funds. CyberLux treats trust as a layered contract: cryptographic identity first, timed release second, human arbitration last. Everything below is diegetic documentation for the storefront — it aligns with how sessions, carts, and signed mirror lists behave in code.
        </p>
      </header>

      <section className="space-y-4">
        <h2 className="text-xs font-black uppercase tracking-[0.35em] text-[#00ff41]/55">Four trust layers</h2>
        <div className="grid gap-4 md:grid-cols-2">
          {[
            {
              n: "L1",
              t: "Vendor bond",
              d: "New stalls post collateral denominated in XMR/BTC fiction. Bond size gates category access (e.g. hardware vs digital).",
            },
            {
              n: "L2",
              t: "PGP continuity",
              d: "Every listing shows a vendor fingerprint; checkout warns on mismatch. Rotations require signed announcements chained to the prior key.",
            },
            {
              n: "L3",
              t: "Timed escrow",
              d: "Funds sit in a cooling state until ship proof + buyer silence or explicit release. Timeout paths are deterministic per SKU class.",
            },
            {
              n: "L4",
              t: "Council multisig",
              d: "Escalations bind three moderators from disjoint rings; two-of-three releases or refunds with on-ledger rationale stubs.",
            },
          ].map((x) => (
            <article key={x.n} className="rounded border border-[#00ff41]/20 bg-[#040806]/80 p-5">
              <span className="text-[10px] font-bold text-[#00ff41]/50">{x.n}</span>
              <h3 className="mt-1 text-sm font-bold text-[#b4ffcc]">{x.t}</h3>
              <p className="mt-2 text-xs leading-relaxed text-[#6a9b7a]">{x.d}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="rounded border border-[#00ff41]/15 bg-[#040806]/90 p-6">
        <h2 className="text-xs font-black uppercase tracking-widest text-[#00ff41]/60">Lexicon · settlement vocabulary</h2>
        <p className="mt-3 text-xs leading-relaxed text-[#6a9b7a]">
          <strong className="text-[#b4ffcc]">Watch-only wallet</strong> fiction for buyers who monitor UTXO flows without signing.{" "}
          <strong className="text-[#b4ffcc]">Replace-by-fee</strong> mentioned only as a cautionary tale in checkout copy.{" "}
          <strong className="text-[#b4ffcc]">Ring signatures</strong> referenced when explaining why Monero lanes default for privacy-marked SKUs.{" "}
          <strong className="text-[#b4ffcc]">Airgapped signing</strong> for high-bond vendors rotating keys.{" "}
          <strong className="text-[#b4ffcc]">Descriptor rotation</strong> ties vendor announcements to prior fingerprints so phishing clones stand out on any onion mirror.
        </p>
      </section>

      <section className="rounded border border-[#00ff41]/25 p-6 md:p-8">
        <h2 className="text-sm font-black uppercase tracking-widest text-[#9dffc4]">Key hygiene checklist</h2>
        <ul className="mt-4 grid gap-3 text-xs leading-relaxed text-[#7ab896] md:grid-cols-2">
          <li>Verify signed mirror bundles against the hub-published list before pasting addresses.</li>
          <li>Never reuse a wallet label across stalls; phishing copies love reused nicknames.</li>
          <li>Treat “urgent finalization” messages as untrusted until the order id matches your session.</li>
          <li>Prefer XMR paths when the listing marks privacy-critical; BTC fiction still simulates fee spikes.</li>
        </ul>
        <p className="mt-6 text-[10px] uppercase tracking-wider text-[#00ff41]/40">
          Related:{" "}
          <Link href="/market/intel" className="text-[#7af598] hover:underline">
            Buyer intel
          </Link>
          ·{" "}
          <Link href="/support" className="text-[#7af598] hover:underline">
            Support ladder
          </Link>
        </p>
      </section>
    </div>
  );
}