// "For AI Agents" cards: Sync / Branch / Retrieve
const { useEffect: useEffectAG, useRef: useRefAG, useState: useStateAG } = React;

function AgentIntegrationSection() {
    const sectionRef = useRefAG(null);
    const headerRef = useRefAG(null);
    const cardsContainerRef = useRefAG(null);

    const [startAnimations, setStartAnimations] = useStateAG(false);
    const [syncTick, setSyncTick] = useStateAG(0);
    const [branchTick, setBranchTick] = useStateAG(0);
    const [retrieveTick, setRetrieveTick] = useStateAG(0);

    useEffectAG(() => {
        const observer = createVisibilityObserver(([entry]) => {
            if (entry.isIntersecting) {
                if (headerRef.current) {
                    headerRef.current.style.opacity = '1';
                    headerRef.current.style.transform = 'translateY(0)';
                }

                if (cardsContainerRef.current) {
                    const cards = Array.from(cardsContainerRef.current.children);
                    cards.forEach((card, i) => {
                        setTimeout(() => {
                            card.style.opacity = '1';
                            card.style.transform = 'translateY(0)';
                        }, i * 150);
                    });
                }

                setTimeout(() => {
                    setStartAnimations(true);
                }, 1100);

                observer.disconnect();
            }
        }, { threshold: 0.2 });

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

    // Sync Loop
    useEffectAG(() => {
        if (!startAnimations) return;

        // play once and HOLD (founder: the 3.5 s reset read as broken)
        for (let i = 1; i <= 5; i++) setTimeout(() => setSyncTick(i), i * 450);
        const t = setTimeout(() => setSyncTick(6), 5 * 450 + 400);
        return () => clearTimeout(t);
    }, [startAnimations]);

    // Branch Loop
    useEffectAG(() => {
        if (!startAnimations) return;

        setTimeout(() => setBranchTick(1), 800);
        setTimeout(() => setBranchTick(2), 1800);
        const t = setTimeout(() => setBranchTick(3), 2800);
        return () => clearTimeout(t);
    }, [startAnimations]);

    // Retrieve Loop
    useEffectAG(() => {
        if (!startAnimations) return;

        setTimeout(() => setRetrieveTick(1), 1200);
        setTimeout(() => setRetrieveTick(2), 2200);
        setTimeout(() => setRetrieveTick(3), 3000);
        setTimeout(() => setRetrieveTick(4), 3800);
        const t = setTimeout(() => setRetrieveTick(5), 4400);
        return () => clearTimeout(t);
    }, [startAnimations]);


    return (
        <section ref={sectionRef} data-screen-label="Agent Integration" style={{
            background: '#0a0a0a',
            borderRadius: '24px',
            margin: '0 24px',
            padding: '100px 24px',
            boxSizing: 'border-box',
            position: 'relative',
            zIndex: 2,
            overflow: 'hidden'
        }}>
            <style>{`
                .ag-cards-container {
                    display: flex;
                    gap: 24px;
                    align-items: stretch;
                }
                .ag-card {
                    background: rgba(255,255,255,0.06);
                    backdrop-filter: blur(12px);
                    -webkit-backdrop-filter: blur(12px);
                    border: 1px solid rgba(255,255,255,0.12);
                    border-radius: 20px;
                    padding: 32px;
                    flex: 1;
                    opacity: 0;
                    transform: translateY(20px);
                    transition: opacity 500ms ease, transform 500ms ease, background 250ms ease, border-color 250ms ease;
                    display: flex;
                    flex-direction: column;
                }
                .ag-card:hover {
                    background: rgba(255,255,255,0.1);
                    border-color: rgba(255,255,255,0.2);
                    transform: translateY(-4px) !important;
                }

                .ag-top-anim {
                    /* min-, not fixed: card 3's chips outgrew a fixed box
                       and spilled across the border (founder screenshot) */
                    min-height: 180px;
                    padding-bottom: 16px;
                    position: relative;
                    margin-bottom: 24px;
                    border-bottom: 1px solid rgba(255,255,255,0.1);
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                }

                .ag-btn {
                    background: #ffffff;
                    color: #0a0a0a;
                    font-size: 16px;
                    font-weight: 700;
                    padding: 16px 36px;
                    border-radius: 100px;
                    border: none;
                    cursor: pointer;
                    text-decoration: none;
                    display: inline-block;
                    transition: all 200ms ease;
                }
                .ag-btn:hover {
                    background: rgba(255,255,255,0.9);
                    transform: translateY(-2px);
                    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
                }

                @media (max-width: 768px) {
                    .ag-cards-container {
                        flex-direction: column;
                    }
                    .ag-top-anim {
                        min-height: 140px;
                    }
                }
                @media (max-width: 480px) {
                    .ag-btn {
                        width: 100%;
                        box-sizing: border-box;
                        text-align: center;
                    }
                }

                .typing-cursor::after {
                    content: '|';
                    animation: blink 1s step-end infinite;
                }
            `}</style>

            <div style={{ maxWidth: '1100px', margin: '0 auto' }}>

                {/* Header */}
                <div ref={headerRef} style={{
                    textAlign: 'center', opacity: 0, transform: 'translateY(16px)',
                    transition: 'opacity 500ms ease, transform 500ms ease'
                }}>
                    <div className="font-figtree" style={{
                        fontSize: '13px', fontWeight: 700, letterSpacing: '4px',
                        textTransform: 'uppercase', color: 'rgba(255,255,255,0.45)', marginBottom: '16px'
                    }}>
                        FOR YOUR AGENT
                    </div>
                    <h2 className="font-google" style={{
                        fontSize: 'clamp(28px, 4vw, 48px)', fontWeight: 800, color: '#ffffff',
                        margin: '0 0 16px 0', lineHeight: 1.15
                    }}>
                        Integrate in minutes
                    </h2>
                    <p className="font-google" style={{
                        fontSize: '16px', color: 'rgba(255,255,255,0.6)', margin: '0 auto 64px auto',
                        maxWidth: '560px', lineHeight: 1.6
                    }}>
                        <code style={{ fontSize: '14px' }}>pip install searchcandy</code>. Ten lines of code and your agent is grounded.
                    </p>
                </div>

                {/* Cards */}
                <div ref={cardsContainerRef} className="ag-cards-container">

                    {/* CARD 1: SYNC */}
                    <div className="ag-card">
                        <div className="ag-top-anim">
                            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', height: '100%', padding: '0 10px' }}>
                                <div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
                                    {[
                                        { nm: "msa.md", idx: 1, endW: "100%", col: "rgba(255,255,255,0.3)", lbl: "ingested ✓", lblCol: "rgba(255,255,255,0.5)" },
                                        { nm: "handbook.pdf", idx: 2, endW: "4%", col: "#6366f1", lbl: "skipped, named", lblCol: "#a5b4fc" },
                                        { nm: "policy.md", idx: 3, endW: "100%", col: "rgba(255,255,255,0.2)", lbl: "ingested ✓", lblCol: "rgba(255,255,255,0.35)" },
                                        { nm: "terms.txt", idx: 4, endW: "100%", col: "rgba(255,255,255,0.2)", lbl: "ingested ✓", lblCol: "rgba(255,255,255,0.35)" },
                                        { nm: "notice.md", idx: 5, endW: "100%", col: "rgba(255,255,255,0.2)", lbl: "ingested ✓", lblCol: "rgba(255,255,255,0.35)" }
                                    ].map(f => (
                                        <div key={f.idx} style={{ display: 'flex', width: '100%', alignItems: 'center' }}>
                                            <span className="font-figtree monospace-like" style={{ fontSize: '12px', color: 'rgba(255,255,255,0.8)', minWidth: '90px' }}>
                                                {f.nm}
                                            </span>
                                            <div className="font-figtree" style={{
                                                fontSize: '10px', color: f.lblCol, width: '80px', textAlign: 'right', marginRight: '10px',
                                                opacity: syncTick >= f.idx ? 1 : 0, transition: 'opacity 200ms ease'
                                            }}>
                                                {f.lbl}
                                            </div>
                                            <div style={{ flex: 1, height: '4px', background: 'rgba(255,255,255,0.1)', borderRadius: '2px', overflow: 'hidden' }}>
                                                <div style={{
                                                    height: '100%', background: f.col,
                                                    width: syncTick >= f.idx ? f.endW : '0%',
                                                    transition: 'width 400ms cubic-bezier(0.16, 1, 0.3, 1)'
                                                }}></div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                        <div style={{ marginTop: 'auto' }}>
                            <div className="font-figtree" style={{
                                display: 'inline-block', background: 'rgba(99,102,241,0.2)', border: '1px solid rgba(99,102,241,0.4)',
                                color: '#a5b4fc', fontSize: '11px', fontWeight: 700, letterSpacing: '2px', borderRadius: '20px', padding: '4px 12px'
                            }}>INGEST</div>
                            <h3 className="font-google" style={{ fontSize: '18px', fontWeight: 700, color: '#ffffff', margin: '12px 0 8px 0' }}>
                                Nothing is silently dropped
                            </h3>
                            <p className="font-google" style={{ fontSize: '14px', color: 'rgba(255,255,255,0.6)', lineHeight: 1.6, margin: 0 }}>
                                Every file gets a receipt: ingested, or skipped with the reason. A network retry can never double-ingest.
                            </p>
                        </div>
                    </div>

                    {/* CARD 2: BRANCH */}
                    <div className="ag-card">
                        <div className="ag-top-anim" style={{ alignItems: 'center' }}>
                            <div style={{ position: 'relative', width: '140px', height: '120px' }}>
                                <div style={{
                                    position: 'absolute', left: '30px', top: '0',
                                    width: '2px', height: '100%', background: 'rgba(255,255,255,0.2)'
                                }}></div>

                                <svg style={{ position: 'absolute', left: '75px', top: '40px', width: '80px', height: '60px', pointerEvents: 'none' }}>
                                    <path d="M 0 0 C 0 30, 60 10, 60 40 L 60 80" fill="none" stroke="#6366f1" strokeWidth="2"
                                        strokeDasharray="150" strokeDashoffset={branchTick >= 3 ? 0 : 150}
                                        style={{ transition: 'stroke-dashoffset 400ms ease-out' }}></path>
                                </svg>

                                <div style={{ position: 'absolute', left: '70px', top: '10px', width: '10px', height: '10px', borderRadius: '50%', background: '#fff', opacity: branchTick >= 0 ? 1 : 0, transition: 'opacity 200ms' }}></div>
                                <div style={{ position: 'absolute', left: '70px', top: '40px', width: '10px', height: '10px', borderRadius: '50%', background: '#fff', opacity: branchTick >= 1 ? 1 : 0, transition: 'opacity 200ms' }}></div>
                                <div style={{ position: 'absolute', left: '70px', top: '90px', width: '10px', height: '10px', borderRadius: '50%', background: '#fff', opacity: branchTick >= 2 ? 1 : 0, transition: 'opacity 200ms' }}></div>

                                <div style={{ position: 'absolute', left: '130px', top: '80px', width: '10px', height: '10px', borderRadius: '50%', background: '#6366f1', opacity: branchTick >= 3 ? 1 : 0, transition: 'opacity 200ms 400ms', filter: 'drop-shadow(0 0 4px #6366f1)' }}></div>

                                <div className="font-figtree" style={{ position: 'absolute', left: '4px', top: '104px', whiteSpace: 'nowrap', fontSize: '11px', color: 'rgba(255,255,255,0.6)', opacity: branchTick >= 3 ? 1 : 0, transition: 'opacity 300ms' }}>grounded answer</div>
                                <div className="font-figtree" style={{ position: 'absolute', left: '112px', top: '104px', whiteSpace: 'nowrap', fontSize: '11px', color: '#a5b4fc', opacity: branchTick >= 3 ? 1 : 0, transition: 'opacity 300ms 400ms' }}>not covered · 0 tokens</div>

                                <div className="font-figtree" style={{ position: 'absolute', left: '0px', top: '8px', width: '56px', textAlign: 'right', fontSize: '10px', color: 'rgba(255,255,255,0.45)', opacity: branchTick >= 0 ? 1 : 0 }}>ask</div>
                                <div className="font-figtree" style={{ position: 'absolute', left: '0px', top: '38px', width: '56px', textAlign: 'right', fontSize: '10px', color: 'rgba(255,255,255,0.45)', opacity: branchTick >= 1 ? 1 : 0 }}>evidence?</div>
                                <div className="font-figtree" style={{ position: 'absolute', left: '0px', top: '88px', width: '56px', textAlign: 'right', fontSize: '10px', color: 'rgba(255,255,255,0.45)', opacity: branchTick >= 2 ? 1 : 0 }}>serve</div>
                            </div>
                        </div>
                        <div style={{ marginTop: 'auto' }}>
                            <div className="font-figtree" style={{
                                display: 'inline-block', background: 'rgba(99,102,241,0.2)', border: '1px solid rgba(99,102,241,0.4)',
                                color: '#a5b4fc', fontSize: '11px', fontWeight: 700, letterSpacing: '2px', borderRadius: '20px', padding: '4px 12px'
                            }}>NOT COVERED</div>
                            <h3 className="font-google" style={{ fontSize: '18px', fontWeight: 700, color: '#ffffff', margin: '12px 0 8px 0' }}>
                                An answer, or an honest no
                            </h3>
                            <p className="font-google" style={{ fontSize: '14px', color: 'rgba(255,255,255,0.6)', lineHeight: 1.6, margin: 0 }}>
                                Your code gets grounded passages, or <code style={{ fontSize: '13px' }}>not_covered: true</code>. Never an exception, never filler.
                            </p>
                        </div>
                    </div>

                    {/* CARD 3: RETRIEVE */}
                    <div className="ag-card">
                        <div className="ag-top-anim" style={{ padding: '0 20px', alignItems: 'flex-start' }}>

                            <div style={{
                                background: 'rgba(255,255,255,0.1)', padding: '8px 16px', borderRadius: '20px',
                                border: '1px solid rgba(255,255,255,0.05)', width: '100%', boxSizing: 'border-box',
                                position: 'relative', overflow: 'visible',
                                animation: retrieveTick === 1 ? 'ripple 400ms ease-out' : 'none'
                            }}>
                                <div className={retrieveTick < 1 ? "font-figtree typing-cursor" : "font-figtree"} style={{ fontSize: '13px', color: '#fff', minHeight: '19px' }}>
                                    {retrieveTick >= 1 ? "What is the termination notice period?" : "What is the termination notice period?".substring(0, Math.floor(Math.random() * 2) + 12)}
                                </div>
                                <style>{`
                                    @keyframes ripple {
                                        0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.3); }
                                        100% { box-shadow: 0 0 0 20px rgba(255,255,255,0); }
                                    }
                                `}</style>
                            </div>

                            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '24px', position: 'relative' }}>
                                <div className="font-figtree monospace-like" style={{
                                    fontSize: '11px', background: 'rgba(59,130,246,0.2)', border: '1px solid rgba(59,130,246,0.3)',
                                    color: '#93c5fd', padding: '4px 10px', borderRadius: '12px', width: 'fit-content',
                                    opacity: retrieveTick >= 2 ? 1 : 0, transform: retrieveTick >= 2 ? 'translateX(0)' : 'translateX(-10px)',
                                    transition: 'opacity 200ms ease, transform 200ms ease'
                                }}>
                                    msa.md · “notice period is thirty days”
                                </div>
                                <div className="font-figtree monospace-like" style={{
                                    fontSize: '11px', background: 'rgba(59,130,246,0.2)', border: '1px solid rgba(59,130,246,0.3)',
                                    color: '#93c5fd', padding: '4px 10px', borderRadius: '12px', width: 'fit-content',
                                    opacity: retrieveTick >= 3 ? 1 : 0, transform: retrieveTick >= 3 ? 'translateX(0)' : 'translateX(-10px)',
                                    transition: 'opacity 200ms ease, transform 200ms ease'
                                }}>
                                    msa.md · “cure period is fifteen days”
                                </div>
                                <div className="font-figtree monospace-like" style={{
                                    fontSize: '11px', background: 'rgba(16,185,129,0.2)', border: '1px solid rgba(16,185,129,0.3)',
                                    color: '#6ee7b7', padding: '4px 10px', borderRadius: '12px', width: 'fit-content',
                                    opacity: retrieveTick >= 4 ? 1 : 0, transform: retrieveTick >= 4 ? 'translateX(0)' : 'translateX(-10px)',
                                    transition: 'opacity 200ms ease, transform 200ms ease'
                                }}>
                                    not_covered: false · source named on every passage
                                </div>
                            </div>

                        </div>
                        <div style={{ marginTop: 'auto' }}>
                            <div className="font-figtree" style={{
                                display: 'inline-block', background: 'rgba(99,102,241,0.2)', border: '1px solid rgba(99,102,241,0.4)',
                                color: '#a5b4fc', fontSize: '11px', fontWeight: 700, letterSpacing: '2px', borderRadius: '20px', padding: '4px 12px'
                            }}>RETRIEVE</div>
                            <h3 className="font-google" style={{ fontSize: '18px', fontWeight: 700, color: '#ffffff', margin: '12px 0 8px 0' }}>
                                Every quote names its source
                            </h3>
                            <p className="font-google" style={{ fontSize: '14px', color: 'rgba(255,255,255,0.6)', lineHeight: 1.6, margin: 0 }}>
                                Passages come back word for word from your documents, with the file each one came from.
                            </p>
                        </div>
                    </div>

                </div>

                {/* CTA */}
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: '56px' }}>
                    <a className="ag-btn font-figtree" href="https://cal.com/searchcandy-labs/30min" target="_blank" rel="noopener">
                        Book a call →
                    </a>
                    <div className="font-figtree" style={{ fontSize: '12px', color: 'rgba(255,255,255,0.4)', marginTop: '12px' }}>
                        Concierge onboarding · live on your documents within a day
                    </div>
                </div>

            </div>
        </section>
    );
}

Object.assign(window, { AgentIntegrationSection });