// Cross-X Linking feature card
const { useEffect: useEffectCX, useRef: useRefCX, useState: useStateCX } = React;

const CX_WORDS = ["Repository", "Logs", "Document", "Research"];

const CX_EXAMPLES = [
    {
        word: "Repository",
        color: "#3b82f6",
        nodes: [
            {
                icon: Code, title: "class FastAPI", isMono: true, titleSize: "13px",
                sub: "fastapi/applications.py", tag: "Python",
                tagStyle: { background: "#3b82f6", color: "#fff", border: "1px solid #3b82f6" }, isBold: true
            },
            {
                icon: Code, title: "router.include_router()", isMono: true, titleSize: "12px",
                sub: "fastapi/routing.py", tag: "Caller",
                tagStyle: { border: "1px solid #3b82f6", color: "#3b82f6", background: "transparent" }, isBold: false
            },
            {
                icon: Code, title: "APIRouter", isMono: true, titleSize: "12px",
                sub: "fastapi/routing.py:L42", tag: "Linked",
                tagStyle: { border: "1px solid #3b82f6", color: "#3b82f6", background: "transparent" }, isBold: false
            }
        ]
    },
    {
        word: "Logs",
        color: "#f59e0b",
        nodes: [
            {
                icon: Terminal, title: "server_error.log", isMono: true, titleSize: "13px",
                sub: "prod/logs/2024-03-01", tag: "Error",
                tagStyle: { background: "#f59e0b", color: "#fff", border: "1px solid #f59e0b" }, isBold: true
            },
            {
                icon: AlertTriangle, title: "NullPointerException", isMono: true, titleSize: "12px",
                sub: "UserService.java:L187", tag: "Stack Trace",
                tagStyle: { border: "1px solid #f59e0b", color: "#f59e0b", background: "transparent" }, isBold: false
            },
            {
                icon: GitCommit, title: "commit abc3f92", isMono: true, titleSize: "12px",
                sub: "Deployed 2024-03-01 09:42", tag: "Deploy",
                tagStyle: { border: "1px solid #f59e0b", color: "#f59e0b", background: "transparent" }, isBold: false
            }
        ]
    },
    {
        word: "Document",
        color: "#10b981",
        nodes: [
            {
                icon: FileText, title: "GDPR Compliance Brief", isMono: false, titleSize: "13px",
                sub: "legal-docs/gdpr_v2.md", tag: "Legal",
                tagStyle: { background: "#10b981", color: "#fff", border: "1px solid #10b981" }, isBold: true
            },
            {
                icon: FileText, title: "Privacy Policy", isMono: false, titleSize: "12px",
                sub: "Section 4.2, Data Rights", tag: "Reference",
                tagStyle: { border: "1px solid #10b981", color: "#10b981", background: "transparent" }, isBold: false
            },
            {
                icon: FileText, title: "Data Processing Agreement", isMono: false, titleSize: "12px",
                sub: "contracts/dpa_2024.md", tag: "Linked",
                tagStyle: { border: "1px solid #10b981", color: "#10b981", background: "transparent" }, isBold: false
            }
        ]
    },
    {
        word: "Research",
        color: "#8b5cf6",
        nodes: [
            {
                icon: FlaskConical, title: "Cancer Biomarker Study", isMono: false, titleSize: "13px",
                sub: "oncology/paper_42.md", tag: "Research",
                tagStyle: { background: "#8b5cf6", color: "#fff", border: "1px solid #8b5cf6" }, isBold: true
            },
            {
                icon: FlaskConical, title: "Clinical Trial Report 2024", isMono: false, titleSize: "12px",
                sub: "trials/ct_2024_oncology.md", tag: "Citation",
                tagStyle: { border: "1px solid #8b5cf6", color: "#8b5cf6", background: "transparent" }, isBold: false
            },
            {
                icon: Database, title: "Genomics Dataset ref_003", isMono: false, titleSize: "12px",
                sub: "datasets/genomics/ref_003", tag: "Dataset",
                tagStyle: { border: "1px solid #8b5cf6", color: "#8b5cf6", background: "transparent" }, isBold: false
            }
        ]
    }
];

function CrossRepoLinkingSection() {
    const sectionRef = useRefCX(null);
    const [wordIndex, setWordIndex] = useStateCX(0);
    const [dataIndex, setDataIndex] = useStateCX(0);
    const [isFadingOut, setIsFadingOut] = useStateCX(false);

    useEffectCX(() => {
        const observer = createVisibilityObserver(([entry]) => {
            if (entry.isIntersecting && sectionRef.current) {
                const card = sectionRef.current.querySelector('.cx-main-card');
                if (card) {
                    card.style.opacity = '1';
                    card.style.transform = 'scale(1)';
                }
            }
        }, { threshold: 0.2 });

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

    useEffectCX(() => {
        const timer = setInterval(() => {
            setWordIndex(prev => (prev + 1) % 4);
            setIsFadingOut(true);

            setTimeout(() => {
                setDataIndex(prev => (prev + 1) % 4);
                setIsFadingOut(false);
            }, 250);
        }, 3000);
        return () => clearInterval(timer);
    }, []);

    const example = CX_EXAMPLES[dataIndex];

    return (
        <section ref={sectionRef} data-screen-label="Cross-Linking" style={{
            background: 'transparent',
            width: '100%',
            padding: '80px 24px',
            boxSizing: 'border-box',
            position: 'relative',
            zIndex: 2
        }}>
            <style>{`
                .cx-main-card {
                    background: #ffffff;
                    border-radius: 24px;
                    box-shadow: 0 8px 48px rgba(0,0,0,0.08);
                    padding: 64px;
                    max-width: 1100px;
                    margin: 0 auto;
                    display: flex;
                    gap: 40px;
                    opacity: 0;
                    transform: scale(0.97);
                    transition: opacity 500ms ease-out, transform 500ms ease-out;
                    box-sizing: border-box;
                }
                .cx-left {
                    width: 36%;
                    display: flex;
                    flex-direction: column;
                }
                .cx-right {
                    width: 64%;
                    position: relative;
                    height: 360px;
                }

                @media (max-width: 900px) {
                    .cx-main-card {
                        flex-direction: column;
                        padding: 32px;
                    }
                    .cx-left, .cx-right {
                        width: 100%;
                    }
                    .cx-right {
                        height: 480px;
                    }
                }
            `}</style>

            <div className="cx-main-card">
                {/* LEFT COLUMN */}
                <div className="cx-left">
                    <div className="font-figtree" style={{
                        fontSize: '11px', fontWeight: 700, letterSpacing: '4px',
                        textTransform: 'uppercase', color: '#6366f1', marginBottom: '20px'
                    }}>FEATURES</div>

                    <h2 className="font-google" style={{
                        fontSize: 'clamp(26px, 3vw, 40px)', fontWeight: 800, color: '#0a0a0a',
                        lineHeight: 1.1, margin: 0, display: 'flex', flexDirection: 'column'
                    }}>
                        <span>Cross-</span>
                        <div style={{ height: '1.3em', overflow: 'hidden', position: 'relative' }}>
                            {CX_WORDS.map((word, i) => {
                                let transform = 'translateY(110%)';
                                if (i === wordIndex) transform = 'translateY(0%)';
                                else if (i === (wordIndex - 1 + CX_WORDS.length) % CX_WORDS.length) transform = 'translateY(-110%)';

                                return (
                                    <div key={word} style={{
                                        position: 'absolute', left: 0, top: 0,
                                        color: '#6366f1', width: '100%',
                                        transform, transition: 'transform 350ms ease-in-out'
                                    }}>
                                        {word}
                                    </div>
                                )
                            })}
                        </div>
                        <span>Linking</span>
                    </h2>

                    <p className="font-google" style={{
                        fontSize: '15px', color: '#6b7280', lineHeight: 1.65,
                        marginTop: '28px', maxWidth: '320px', fontWeight: 400
                    }}>
                        TGM cross-links every document set you give it, contracts, policies, research, reports, into one knowledge graph, so related passages surface together and every one still names its source.
                    </p>
                </div>

                {/* RIGHT COLUMN */}
                <div className="cx-right">

                    {/* SVG Layer */}
                    <svg width="100%" height="100%" style={{
                        position: 'absolute', top: 0, left: 0, zIndex: 1,
                        opacity: isFadingOut ? 0 : 1,
                        transition: 'opacity 200ms ease',
                        overflow: 'visible',
                        pointerEvents: 'none'
                    }}>
                        <style>{`
                            @keyframes cx-dash-march {
                                from { stroke-dashoffset: 110; }
                                to { stroke-dashoffset: 0; }
                            }
                            .cx-dash-anim {
                                animation: cx-dash-march 2s linear infinite;
                            }
                        `}</style>
                        <line className="cx-dash-anim" x1="77%" y1="16%" x2="77%" y2="84%" stroke={example.color} strokeWidth="1.5" opacity="0.6" strokeDasharray="5 6"></line>
                        <line className="cx-dash-anim" x1="77%" y1="84%" x2="23%" y2="46%" stroke={example.color} strokeWidth="1.5" opacity="0.6" strokeDasharray="5 6"></line>
                        <line className="cx-dash-anim" x1="23%" y1="46%" x2="77%" y2="16%" stroke={example.color} strokeWidth="1.5" opacity="0.6" strokeDasharray="5 6"></line>
                    </svg>

                    {/* Nodes Layer */}
                    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
                        {example.nodes.map((node, i) => {
                            const positions = [
                                { top: 0, right: 0 },
                                { top: '30%', left: 0 },
                                { bottom: 0, right: 0 }
                            ];

                            return (
                                <div key={i} style={{
                                    position: 'absolute',
                                    ...positions[i],
                                    width: '46%',
                                    borderRadius: '12px',
                                    border: '2px solid ' + example.color,
                                    padding: '14px 16px',
                                    background: '#ffffff',
                                    boxShadow: '0 4px 16px rgba(0,0,0,0.06)',
                                    boxSizing: 'border-box',
                                    display: 'flex',
                                    flexDirection: 'column',
                                    gap: '6px',
                                    zIndex: 10,
                                    opacity: isFadingOut ? 0 : 1,
                                    transform: isFadingOut ? 'scale(0.97)' : 'scale(1)',
                                    transition: isFadingOut ? 'opacity 250ms ease, transform 250ms ease' : 'opacity 300ms ease, transform 300ms ease'
                                }}>
                                    <div style={{ color: example.color, marginBottom: '4px', fontSize: '18px', display: 'flex' }}>
                                        <node.icon size={18} />
                                    </div>
                                    <div className={node.isMono ? "font-google monospace-like" : "font-google"} style={{
                                        fontSize: '12px', fontWeight: 700, lineHeight: 1.2, color: '#0a0a0a',
                                        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'
                                    }}>
                                        {node.title}
                                    </div>
                                    <div className="font-figtree" style={{
                                        fontSize: '10px', color: '#9ca3af', marginBottom: '6px',
                                        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'
                                    }}>
                                        {node.sub}
                                    </div>
                                    <div className="font-figtree" style={{
                                        display: 'inline-block', padding: '2px 10px',
                                        borderRadius: '20px', fontSize: '10px', fontWeight: 700,
                                        alignSelf: 'flex-start', marginTop: 'auto',
                                        ...node.tagStyle
                                    }}>
                                        {node.tag}
                                    </div>
                                </div>
                            )
                        })}

                    </div>
                </div>
            </div>
        </section>
    );
}

Object.assign(window, { CrossRepoLinkingSection });