window.Footer = function Footer() {
  const isMobile = useIsMobile();
  const cursorRef = React.useRef(null);
  const [animate, setAnimate] = React.useState(false);

  React.useEffect(() => {
    if (!cursorRef.current) return;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setAnimate(true);
          observer.disconnect();
        }
      },
      { threshold: 0.5 }
    );
    observer.observe(cursorRef.current);
    return () => observer.disconnect();
  }, []);

  return (
    <footer style={{
      background: 'var(--invert-bg)',
      color: 'var(--invert-text)',
      padding: isMobile ? '64px 24px 40px' : '96px 48px 48px',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '2fr 1fr 1fr',
          gap: isMobile ? 48 : 64,
          marginBottom: isMobile ? 64 : 96,
        }}>
          <div>
            <div style={{
              fontWeight: 800, fontSize: isMobile ? 56 : 80,
              letterSpacing: '-0.045em', color: '#ffffff',
              marginBottom: 16, lineHeight: 1,
            }}>stitch<span ref={cursorRef} className={animate ? 'cursor-blink' : ''} style={{ color: 'var(--accent)' }}>_</span></div>
            <p style={{
              fontSize: 16, lineHeight: 1.5, color: '#a3a3a3', margin: 0, maxWidth: 360,
            }}>
              Agentic operations. AI inside the tools you already use. Production-grade. Yours after six weeks.
            </p>
          </div>
          <div>
            <div className="eyebrow" style={{ color: '#666666', marginBottom: 16 }}>Site</div>
            <ul style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <li><a href="#pillars" style={{ color: '#ffffff', fontSize: 15 }}>How</a></li>
              <li><a href="#work" style={{ color: '#ffffff', fontSize: 15 }}>Work</a></li>
              <li><a href="#faq" style={{ color: '#ffffff', fontSize: 15 }}>FAQ</a></li>
              <li><a href="#contact" style={{ color: '#ffffff', fontSize: 15 }}>Contact</a></li>
            </ul>
          </div>
          <div>
            <div className="eyebrow" style={{ color: '#666666', marginBottom: 16 }}>Contact</div>
            <ul style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <li><a href="mailto:hello@getstitchwork.com" style={{ color: '#ffffff', fontSize: 15 }}>hello@getstitchwork.com</a></li>
            </ul>
          </div>
        </div>
        <div style={{
          paddingTop: 32,
          borderTop: '1px solid var(--invert-border)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16,
          fontFamily: 'var(--font-mono)', fontSize: 12, color: '#666666',
        }}>
          <div>© 2026 stitch_</div>
          <div>Based in SLC</div>
        </div>
      </div>
    </footer>
  );
};