// Document history, L1 + L5 of the lockstep claims commit.
//
// LAW (release sprint §3.1 / customer-path §6): every number here must
// match docs.searchcandy-labs.com/proof/ and the banked gate records;
// change them together or not at all.
//
// Each number below, and where it was measured:
//   327/327, version-history certification 2026-08-26, four document
//              sets, graphs of 77k-166k passages, across add/update/
//              remove/index-rebuild growth. Pre-freeze: 31-34 of 83.
//   0, answers citing a document added after the pinned version,
//              across all 981 replays of that campaign.
//   under 1s, restore / open draft / publish measured 912/926/793 ms
//              with 66 questions running: 66 answered, 0 turned away.
//   0 of 83, the exclusion gate: removing documents changed nothing
//              for other versions.
//
// NOT CLAIMED HERE, deliberately: anything about answering WHILE a
// change is being saved. A graph does not answer during a write, that
// window scales with the graph, and serving during writes is designed
// but not built. The struck 08-18 claims ("query the moment you
// ingest", "no background jobs", "no waiting to index") STAY struck.
function VersionHistorySection() {
    const STATS = [
        // Founder session 2026-08-28: percentages, plain labels, no
        // subtext. 100% = the banked 327/327 replay certification;
        // under 1 s = the measured 912/926/793 ms pointer moves;
        // 0 = no answer ever cited a document added later.
        { n: "100%", label: "identical answers from old versions" },
        { n: "under 1 s", label: "to undo a change" },
        { n: "0", label: "old answers changed by new uploads" }
    ];

    return (
        <section id="history" data-screen-label="Document history" style={{
            position: 'relative', zIndex: 2, width: '100%',
            padding: '90px 24px 100px', boxSizing: 'border-box'
        }}>
            <div style={{ maxWidth: '1040px', margin: '0 auto', textAlign: 'center' }}>
                <div className="font-mono" style={{
                    fontSize: '12px', fontWeight: 600, letterSpacing: '0.28em',
                    textTransform: 'uppercase', color: '#9b8bff', marginBottom: '18px'
                }}>Your documents get a history</div>

                <h2 className="font-bricolage" style={{
                    fontSize: 'clamp(28px, 4vw, 48px)', fontWeight: 700,
                    lineHeight: 1.08, letterSpacing: '-0.03em', color: '#fff',
                    margin: 0
                }}>
                    Every graph comes with versioning.<br />
                    Ask any version, get its <span style={{
                        background: 'linear-gradient(100deg,#7b5cff,#6e9bff 45%,#3fe0ae)',
                        WebkitBackgroundClip: 'text', backgroundClip: 'text',
                        color: 'transparent'
                    }}>exact answer</span>.
                </h2>

                <p className="font-google" style={{
                    fontSize: '17px', lineHeight: 1.6, color: 'rgba(255,255,255,0.62)',
                    maxWidth: '720px', margin: '20px auto 0'
                }}>
                    Update or delete documents freely. Old versions keep answering
                    exactly as they did.
                </p>

                <div style={{
                    display: 'grid',
                    gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
                    gap: '18px', marginTop: '44px'
                }}>
                    {STATS.map((s, i) => (
                        <div key={i} style={{
                            background: 'rgba(255,255,255,0.04)',
                            border: '1px solid rgba(255,255,255,0.09)',
                            borderRadius: '18px', padding: '28px 22px',
                            textAlign: 'left', backdropFilter: 'blur(6px)'
                        }}>
                            <div className="font-bricolage" style={{
                                fontSize: '38px', fontWeight: 700,
                                letterSpacing: '-0.02em',
                                background: 'linear-gradient(100deg,#7b5cff,#6e9bff 55%,#3fe0ae)',
                                WebkitBackgroundClip: 'text', backgroundClip: 'text',
                                color: 'transparent', lineHeight: 1.1
                            }}>{s.n}</div>
                            <div className="font-google" style={{
                                fontSize: '15px', fontWeight: 600, color: '#fff',
                                marginTop: '10px', lineHeight: 1.35
                            }}>{s.label}</div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}

Object.assign(window, { VersionHistorySection });