// Footer
const { useEffect: useEffectFT, useRef: useRefFT, useState: useStateFT } = React;

function FooterSection() {
    const sectionRef = useRefFT(null);
    const [visible, setVisible] = useStateFT(false);

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

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

    const TwitterX = () => (
        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
        </svg>
    );

    return (
        <footer ref={sectionRef} data-screen-label="Footer" style={{
            position: 'relative',
            zIndex: 10,
            background: '#0a0a0a',
            borderTop: '1px solid rgba(255,255,255,0.08)',
            padding: '64px 24px 32px',
            width: '100%',
            boxSizing: 'border-box',
            fontFamily: "'Figtree', sans-serif"
        }}>
            <style>{`
                .footer-container {
                    max-width: 1100px;
                    margin: 0 auto;
                    opacity: 0;
                    transform: translateY(12px);
                    transition: opacity 500ms ease-out, transform 500ms ease-out;
                }
                .footer-container.visible {
                    opacity: 1;
                    transform: translateY(0);
                }
                .footer-top {
                    display: flex;
                    justify-content: space-between;
                    gap: 48px;
                }
                .footer-brand {
                    width: 35%;
                }
                .footer-heading {
                    font-size: 11px;
                    font-weight: 700;
                    letter-spacing: 3px;
                    text-transform: uppercase;
                    color: rgba(255,255,255,0.35);
                    margin-bottom: 16px;
                }
                .footer-link {
                    font-size: 14px;
                    color: rgba(255,255,255,0.6);
                    display: block;
                    margin-bottom: 10px;
                    text-decoration: none;
                    transition: color 150ms ease;
                }
                .footer-link:hover {
                    color: #ffffff;
                }
                .social-icon-btn {
                    width: 36px;
                    height: 36px;
                    border-radius: 8px;
                    background: rgba(255,255,255,0.08);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: rgba(255,255,255,0.6);
                    text-decoration: none;
                    transition: all 150ms ease;
                }
                .social-icon-btn:hover {
                    background: rgba(255,255,255,0.15);
                    color: #ffffff;
                }
                .footer-bottom {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                .footer-bottom-text {
                    font-size: 12px;
                    color: rgba(255,255,255,0.3);
                }
                .footer-bottom-link {
                    font-size: 12px;
                    color: rgba(255,255,255,0.3);
                    text-decoration: none;
                    transition: color 150ms ease;
                }
                .footer-bottom-link:hover {
                    color: rgba(255,255,255,0.6);
                }

                @media (max-width: 768px) {
                    .footer-top {
                        flex-direction: column;
                        gap: 40px;
                    }
                    .footer-brand {
                        width: 100%;
                    }
                }
                @media (max-width: 640px) {
                    .footer-bottom {
                        flex-direction: column;
                        gap: 12px;
                        text-align: center;
                    }
                }
            `}</style>

            <div className={`footer-container ${visible ? 'visible' : ''}`}>

                <div className="footer-top">
                    <div className="footer-brand">
                        <div style={{ fontSize: '16px', fontWeight: 800, color: '#ffffff', fontFamily: "'Playpen Sans', sans-serif", letterSpacing: '-0.02em' }}>
                            Search Candy Labs
                        </div>
                        <div style={{ fontSize: '13px', color: 'rgba(255,255,255,0.4)', marginTop: '8px', fontStyle: 'italic' }}>
                            TGM turns your documents into a knowledge graph.
                        </div>
                    </div>

                    <div>
                        <div className="footer-heading">Product</div>
                        <a href="#how-it-works" className="footer-link">How it works</a>
                        <a href="#proof" className="footer-link">Proof</a>
                        <a href="/login" className="footer-link">Sign in</a>
                    </div>

                    <div>
                        <div className="footer-heading">Contact</div>
                        <a href="mailto:hello@searchcandy-labs.com" className="footer-link">Email us</a>
                        <a href="https://cal.com/searchcandy-labs/30min" target="_blank" rel="noopener" className="footer-link">Book a call</a>
                    </div>
                </div>

                <div style={{
                    marginTop: '48px',
                    borderTop: '1px solid rgba(255,255,255,0.08)',
                    paddingTop: '24px'
                }}>
                    <div className="footer-bottom">
                        <div className="footer-bottom-text">
                            © 2026 SearchCandy Labs Inc.
                        </div>
                        <div className="footer-bottom-text">
                            <a href="/terms" className="footer-bottom-link">Terms of Service</a>
                            <span style={{ color: 'rgba(255,255,255,0.2)', margin: '0 6px' }}>·</span>
                            <a href="/privacy" className="footer-bottom-link">Privacy Policy</a>
                        </div>
                    </div>
                </div>

            </div>
        </footer>
    );
}

Object.assign(window, { FooterSection });