// Measured numbers strip, the landing's claims, each traceable to
// the certification record. LAW (release sprint §3.1 / customer-path
// §6): every number here must match docs.searchcandy-labs.com/proof/;
// change them together or not at all.
function ProofStripSection() {
    const STATS = [
        { n: "98.6%", label: "answer accuracy" },
        { n: "100%", label: "never fooled by trick questions " },
        { n: "0", label: "made-up quotes, ever" },
        { n: "22 ms", label: "search speed (p50)" }
    ];

    return (
        <section id="proof" data-screen-label="Proof strip" 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'
                }}>Proof</div>
                <h2 className="font-bricolage" style={{
                    fontSize: 'clamp(28px, 4vw, 48px)', fontWeight: 700,
                    lineHeight: 1.08, letterSpacing: '-0.03em', color: '#fff',
                    margin: 0
                }}>
                    Every number is a real test result.
                </h2>

                <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: '54px', 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: '19px', fontWeight: 600, color: '#fff',
                                marginTop: '10px', lineHeight: 1.35
                            }}>{s.label}</div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}

Object.assign(window, { ProofStripSection });