// SocialProof v2, Real credibility for a new agency: tech stack + verticals + capacity
// (Fake company "logos" hurt trust because leads Google them and find nothing)
const { useRef: useSpRef, useEffect: useSpEffect, useState: useSpState } = React;

// Real tech we actually use, these ARE Googleable and verifiable
const STACK = [
  { name: 'Anthropic', sub: 'CLAUDE'   },
  { name: 'OpenAI',    sub: 'GPT-4'    },
  { name: 'AWS',       sub: 'CLOUD'    },
  { name: 'LangGraph', sub: 'AGENTS'   },
  { name: 'Vercel',    sub: 'EDGE'     },
  { name: 'Pinecone',  sub: 'VECTOR'   },
];

// Verticals we serve (real claim, defensible)
const VERTICALS = [
  'Med Spas', 'CPA Firms', 'Real Estate', 'Law Firms', 'Retail', 'Logistics', 'Staffing', 'B2B SaaS',
];

function SocialProof() {
  const [revealed, setRevealed] = useSpState(false);
  const sectionRef = useSpRef(null);

  useSpEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setRevealed(true); }, { threshold: 0.2 });
    if (sectionRef.current) obs.observe(sectionRef.current);
    return () => obs.disconnect();
  }, []);

  return (
    <section ref={sectionRef} style={{
      padding: '48px 0 40px',
      background: 'var(--bg-primary)',
      borderTop: '1px solid var(--border-subtle)',
      borderBottom: '1px solid var(--border-subtle)',
      position: 'relative',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 48px' }}>

        {/* Two-column credibility grid */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 56, alignItems: 'center',
        }} className="sp-grid">

          {/* LEFT, Built with (real, verifiable tech) */}
          <div style={{
            opacity: revealed ? 1 : 0, transform: revealed ? 'translateY(0)' : 'translateY(12px)',
            transition: 'all 0.6s ease',
          }}>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
              color: 'var(--text-tertiary)', letterSpacing: '0.18em',
              textTransform: 'uppercase', marginBottom: 16,
            }}>// BUILT WITH PRODUCTION-GRADE TOOLS</div>

            <div style={{
              display: 'flex', flexWrap: 'wrap', gap: 28,
            }}>
              {STACK.map((t, i) => (
                <div key={i} style={{
                  display: 'flex', flexDirection: 'column', gap: 1,
                  opacity: revealed ? 0.7 : 0,
                  transform: revealed ? 'translateY(0)' : 'translateY(8px)',
                  transition: `opacity 0.55s ease ${0.05 + i * 0.05}s, transform 0.55s ease ${0.05 + i * 0.05}s`,
                  cursor: 'default',
                }}
                  onMouseEnter={e => { e.currentTarget.style.opacity = '1'; }}
                  onMouseLeave={e => { e.currentTarget.style.opacity = '0.7'; }}
                >
                  <span style={{
                    fontFamily: 'Syne, sans-serif', fontSize: 17, fontWeight: 700,
                    color: 'var(--text-secondary)', letterSpacing: '0.01em', lineHeight: 1,
                  }}>{t.name}</span>
                  <span style={{
                    fontFamily: 'JetBrains Mono, monospace', fontSize: 8.5,
                    color: 'var(--text-tertiary)', letterSpacing: '0.18em', textTransform: 'uppercase',
                  }}>{t.sub}</span>
                </div>
              ))}
            </div>
          </div>

          {/* RIGHT, Live capacity card */}
          <div style={{
            background: 'var(--bg-secondary)',
            border: '1px solid var(--border-subtle)',
            borderRadius: 12, padding: '20px 22px',
            opacity: revealed ? 1 : 0, transform: revealed ? 'translateY(0)' : 'translateY(12px)',
            transition: 'all 0.6s ease 0.15s',
          }}>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              marginBottom: 14,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{
                  width: 7, height: 7, borderRadius: '50%',
                  background: 'var(--accent-mint)',
                  boxShadow: '0 0 8px var(--accent-mint)',
                  animation: 'sp-blink 1.8s ease infinite',
                }} />
                <span style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                  color: 'var(--accent-mint-text)', letterSpacing: '0.12em',
                }}>// CURRENT STATUS</span>
              </div>
              <span style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
                color: 'var(--text-tertiary)', letterSpacing: '0.06em',
                padding: '3px 8px', border: '1px solid var(--border-subtle)',
                borderRadius: 4,
              }}>Q3 2026</span>
            </div>

            <div style={{
              fontFamily: 'Syne, sans-serif', fontSize: 18, fontWeight: 700,
              color: 'var(--text-primary)', letterSpacing: '-0.01em', lineHeight: 1.3,
              marginBottom: 12,
            }}>
              Taking <span style={{ color: 'var(--accent-mint)' }}>2 selective clients</span> this quarter.
            </div>

            <div style={{
              fontFamily: 'Inter, sans-serif', fontSize: 13,
              color: 'var(--text-secondary)', lineHeight: 1.55,
              marginBottom: 14,
            }}>
              We say no more often than yes. Right fit means you have a clear bottleneck, real data, and operational capacity to deploy.
            </div>

            <div style={{
              display: 'flex', flexWrap: 'wrap', gap: 6,
              paddingTop: 12, borderTop: '1px solid var(--border-subtle)',
            }}>
              {VERTICALS.map((v, i) => (
                <span key={i} style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 9.5,
                  color: 'var(--text-tertiary)', letterSpacing: '0.04em',
                  padding: '3px 9px', borderRadius: 4,
                  background: 'var(--bg-tertiary)',
                  border: '1px solid var(--border-subtle)',
                }}>{v}</span>
              ))}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes sp-blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
        @media (max-width: 880px) {
          .sp-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { SocialProof });