const Evidence = () => {
  const chain = [
    {
      n: "01",
      l: "Capture",
      h: <>Every frame <span>hashed on-device.</span></>,
      one: "SHA-256 per frame, stored alongside the video. A single changed pixel breaks the hash.",
    },
    {
      n: "02",
      l: "Anchor",
      h: <>Hourly <span>Merkle root</span> signed.</>,
      one: "Every 60 minutes, all hashes fold into a root, signed with a hardware-bound device key.",
    },
    {
      n: "03",
      l: "Publish",
      h: <>Pushed to an <span>append-only log.</span></>,
      one: "Signed roots go to a public transparency log. No rewind, no deletion, no silent edit.",
    },
    {
      n: "04",
      l: "Verify",
      h: <>Third parties <span>verify without access.</span></>,
      one: "Insurers and courts confirm a clip's authenticity against the log — they see nothing else.",
    },
  ];
  return (
    <section className="evidence" id="evidence">
      <div className="wrap">
        <div className="evidence-head">
          <div>
            <Reveal><Eyebrow>The Moat · Evidence Chain</Eyebrow></Reveal>
            <Reveal delay={80}>
              <h2>Evidence<br/>you can <span style={{ color: "var(--amber)" }}>defend</span> with.</h2>
            </Reveal>
            <Reveal delay={160}>
              <p className="lead">
                "We have it on video" isn't enough when a dispute becomes
                a deposition. Sitinel's evidence is provable the day you
                hand it over — signed by the device that captured it,
                anchored in an append-only log, verifiable without
                sharing the rest of your footage.
              </p>
            </Reveal>
          </div>
          <Reveal delay={240}>
            <div className="stamp">
              <span className="t">Signed Root</span>
              <span className="k">04·19·26</span>
              <code>sig: 91ae-2f70-88bb-4c53-fd11-6a42-0e9c-7a38</code>
              <span className="t" style={{ color: "var(--muted)" }}>device-key · epoch 428193</span>
            </div>
          </Reveal>
        </div>

        <div className="chain chain-summary">
          {chain.map((c, i) => (
            <Reveal key={c.n} delay={i * 70}>
              <div className="chain-link chain-link-lite">
                <div className="badge">
                  <span className="step-n tabular">{c.n}</span>
                  <span className="step-l">{c.l}</span>
                </div>
                <h3>{c.h}</h3>
                <p>{c.one}</p>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal>
          <div className="evidence-cta">
            <a href="evidence-chain.html" className="btn btn-amber">
              How we prove it — full breakdown <Arrow/>
            </a>
            <span className="mono evidence-cta-sub">
              Hash examples · device signing · broker FAQ
            </span>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

Object.assign(window, { Evidence });