// "Why TGM" comparison table
const { useEffect: useEffectCT, useRef: useRefCT, useState: useStateCT } = React;

function ComparisonTableSection() {
    const sectionRef = useRefCT(null);
    const headerRef = useRefCT(null);
    const cardRef = useRefCT(null);
    const [visible, setVisible] = useStateCT(false);

    useEffectCT(() => {
        const observer = createVisibilityObserver(([entry]) => {
            if (entry.isIntersecting) {
                setVisible(true);
                observer.disconnect();
            }
        }, { threshold: 0.15 });

        if (sectionRef.current) observer.observe(sectionRef.current);
        return () => observer.disconnect();
    }, []);

    const CheckMuted = () => (
        <div style={{
            width: '20px', height: '20px', borderRadius: '50%', background: 'rgba(16, 185, 129, 0.12)',
            border: '1.5px solid rgba(16, 185, 129, 0.4)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#10b981', fontSize: '12px', fontWeight: 800, margin: '0 auto', boxSizing: 'border-box'
        }} className="ag-icon">✓</div>
    );

    const CheckTGM = () => (
        <div style={{
            width: '20px', height: '20px', borderRadius: '50%', background: 'rgba(16, 185, 129, 0.18)',
            border: '1.5px solid rgba(16, 185, 129, 0.5)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#059669', fontSize: '12px', fontWeight: 800, margin: '0 auto', boxSizing: 'border-box'
        }} className="ag-icon">✓</div>
    );

    const Cross = () => (
        <div style={{
            width: '20px', height: '20px', borderRadius: '50%', background: 'rgba(239, 68, 68, 0.08)',
            border: '1.5px solid rgba(239, 68, 68, 0.25)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#ef4444', fontSize: '11px', margin: '0 auto', boxSizing: 'border-box'
        }} className="ag-icon">✕</div>
    );

    // Reconciled to the shipped v1 product + the certified record
    // (release sprint §3.1): every TGM tick is a claim we can defend
    // on a call, with the measured ones traceable to docs./proof/.
    const tableData = [
        { type: 'header', text: 'CORE' },
        { title: 'Understands connections between your documents', rag: false, graphrag: true, tgm: true },
        { title: 'Uses an LLM to build the graph (adds cost + noise)', rag: false, graphrag: true, tgm: false },
        { title: 'Self-organizing, no schema or config needed', rag: true, graphrag: false, tgm: true },
        { title: 'Returns your actual source content (not summaries)', rag: true, graphrag: false, tgm: true },
        { title: 'Names the source document on every passage served', rag: false, graphrag: false, tgm: true },
        { title: "Says so when the answer isn't in your documents, instead of hallucinating", rag: false, graphrag: false, tgm: true, lastInGroup: true },

        { type: 'header', text: 'PROVEN, NOT PROMISED' },
        { title: 'Absent-entity questions correctly not covered, 100% (55/55 certified, 15/15 live)', rag: false, graphrag: false, tgm: true },
        { title: 'Zero fabricated quotes across every blinded certification panel', rag: false, graphrag: false, tgm: true },
        { title: 'Split-evidence telemetry on multi-part questions (joint coverage)', rag: false, graphrag: false, tgm: true },
        { title: 'Publishes its full methodology and honest caveats', rag: false, graphrag: false, tgm: true, lastInGroup: true }
    ];

    let rowIdx = 0;

    return (
        <section ref={sectionRef} data-screen-label="Comparison Table" style={{
            background: 'transparent',
            padding: '100px 24px',
            width: '100%',
            boxSizing: 'border-box'
        }}>
            <style>{`
                .comp-card {
                    background: #ffffff;
                    border-radius: 24px;
                    padding: 48px;
                    box-shadow: 0 16px 64px rgba(0,0,0,0.15);
                    max-width: 900px;
                    margin: 0 auto;
                    overflow: hidden;
                    width: 100%;
                    box-sizing: border-box;
                }
                .comp-table {
                    width: 100%;
                    border-collapse: collapse;
                    background: transparent;
                }
                .comp-feature-row {
                    transition: background 200ms ease;
                }
                .comp-feature-row:hover {
                    background: #f9fafb;
                }
                .comp-feature-cell {
                    padding: 16px 28px;
                    font-size: 13px;
                    font-weight: 500;
                    color: #374151;
                    line-height: 1.4;
                    box-sizing: border-box;
                }
                .comp-rag-cell, .comp-graphrag-cell {
                    padding: 16px 8px;
                    text-align: center;
                }
                .comp-tgm-cell {
                    padding: 16px 8px;
                    text-align: center;
                    background: rgba(99,102,241,0.05);
                    border-left: 1px solid rgba(99,102,241,0.15);
                }

                .anim-header {
                    opacity: 0;
                    transform: translateY(16px);
                    transition: opacity 500ms ease, transform 500ms ease;
                }
                .anim-header.visible {
                    opacity: 1;
                    transform: translateY(0);
                }

                .anim-card {
                    opacity: 0;
                    transform: translateY(20px);
                    transition: opacity 500ms ease 200ms, transform 500ms ease 200ms;
                }
                .anim-card.visible {
                    opacity: 1;
                    transform: translateY(0);
                }

                .anim-row {
                    opacity: 0;
                    transform: translateX(-8px);
                    transition: opacity 300ms ease, transform 300ms ease;
                }
                .visible .anim-row {
                    opacity: 1;
                    transform: translateX(0);
                }

                @media (max-width: 640px) {
                    .comp-feature-cell {
                        font-size: 11px;
                        padding: 14px 16px;
                    }
                    .comp-th-lbl {
                        font-size: 11px !important;
                    }
                    .ag-icon {
                        width: 16px !important;
                        height: 16px !important;
                        font-size: 9px !important;
                    }
                    .comp-section-header {
                        font-size: 9px !important;
                        padding: 10px 16px !important;
                    }
                }
            `}</style>

            <div style={{ maxWidth: '900px', margin: '0 auto', width: '100%' }}>
                <div ref={cardRef} className={`comp-card anim-card ${visible ? 'visible' : ''}`}>
                    <div ref={headerRef} className={`anim-header ${visible ? 'visible' : ''}`} style={{ textAlign: 'center' }}>
                        <div className="font-figtree" style={{
                            fontSize: '11px', fontWeight: 700, letterSpacing: '4px',
                            textTransform: 'uppercase', color: '#6366f1', marginBottom: '16px'
                        }}>
                            WHY TGM
                        </div>
                        <h2 className="font-google" style={{
                            fontSize: 'clamp(26px, 3.5vw, 42px)', fontWeight: 800, color: '#0a0a0a',
                            margin: '0 0 56px 0'
                        }}>
                            Not all memory is created equal
                        </h2>
                    </div>
                    <table className="comp-table font-figtree">
                        <thead>
                            <tr>
                                <th style={{ width: '52%', padding: '20px 28px', borderBottom: '1px solid #f0f0f0' }}></th>
                                <th style={{ width: '16%', textAlign: 'center', borderBottom: '1px solid #f0f0f0' }}>
                                    <div className="comp-th-lbl" style={{ fontSize: '13px', fontWeight: 600, color: '#9ca3af' }}>RAG</div>
                                </th>
                                <th style={{ width: '16%', textAlign: 'center', borderBottom: '1px solid #f0f0f0' }}>
                                    <div className="comp-th-lbl" style={{ fontSize: '13px', fontWeight: 600, color: '#9ca3af' }}>GraphRAG</div>
                                </th>
                                <th style={{
                                    width: '16%', textAlign: 'center', background: 'rgba(99,102,241,0.05)',
                                    borderBottom: '2px solid #6366f1', borderLeft: '1px solid rgba(99,102,241,0.15)'
                                }}>
                                    <div className="comp-th-lbl" style={{ fontSize: '13px', fontWeight: 800, color: '#0a0a0a' }}>TGM</div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {tableData.map((item, index) => {
                                if (item.type === 'header') {
                                    return (
                                        <tr key={index} className="anim-row" style={{ transitionDelay: `${200 + (rowIdx * 40)}ms` }}>
                                            <td colSpan="4" className="comp-section-header" style={{
                                                background: '#f9fafb',
                                                padding: '10px 28px',
                                                fontSize: '10px', fontWeight: 700, letterSpacing: '3px',
                                                textTransform: 'uppercase', color: '#9ca3af',
                                                borderTop: '1px solid #f0f0f0'
                                            }}>
                                                {item.text}
                                            </td>
                                        </tr>
                                    );
                                }

                                rowIdx++;
                                return (
                                    <tr key={index} className="comp-feature-row anim-row" style={{ transitionDelay: `${200 + (rowIdx * 40)}ms` }}>
                                        <td className="comp-feature-cell" style={{ borderBottom: '1px solid #f0f0f0' }}>
                                            {item.title}
                                        </td>
                                        <td className="comp-rag-cell" style={{ borderBottom: '1px solid #f0f0f0' }}>
                                            {item.rag ? <CheckMuted /> : <Cross />}
                                        </td>
                                        <td className="comp-graphrag-cell" style={{ borderBottom: '1px solid #f0f0f0' }}>
                                            {item.graphrag ? <CheckMuted /> : <Cross />}
                                        </td>
                                        <td className="comp-tgm-cell" style={{ borderBottom: '1px solid #f0f0f0', borderRight: 'none' }}>
                                            {item.tgm ? <CheckTGM /> : <Cross />}
                                        </td>
                                    </tr>
                                );
                            })}
                        </tbody>
                    </table>
                </div>

            </div>
        </section>
    );
}

Object.assign(window, { ComparisonTableSection });
