// TechStack v2, Compressed credibility strip. Buyers don't read 30 tool descriptions.
const { useRef: useTsRef, useEffect: useTsEffect, useState: useTsState } = React;

const TECH_GROUPS = [
  { cat: 'AI MODELS',          color: '#00D9A0', tools: ['Claude', 'GPT-4', 'Gemini', 'Llama', 'Open-source'] },
  { cat: 'AI INFRASTRUCTURE',  color: '#8B5CF6', tools: ['LangGraph', 'Langfuse', 'Pinecone', 'pgvector', 'Custom evals'] },
  { cat: 'BACKEND',            color: '#F59E0B', tools: ['Python', 'FastAPI', 'Node.js', 'Postgres', 'Redis'] },
  { cat: 'CLOUD',              color: '#00D9A0', tools: ['AWS', 'Azure', 'Vercel', 'Cloudflare', 'Docker'] },
  { cat: 'INTEGRATION',        color: '#8B5CF6', tools: ['n8n', 'Zapier', 'Make', 'Custom workers', 'Webhooks'] },
  { cat: 'FRONTEND',           color: '#F59E0B', tools: ['Next.js', 'React', 'TypeScript', 'Tailwind', 'Sentry'] },
];

function TechStack() {
  const [revealed, setRevealed] = useTsState(false);
  const sectionRef = useTsRef(null);

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

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

        {/* Compact header */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          marginBottom: 32, flexWrap: 'wrap', gap: 16,
          opacity: revealed ? 1 : 0, transform: revealed ? 'translateY(0)' : 'translateY(16px)',
          transition: 'all 0.6s var(--ease-expo)',
        }}>
          <div>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
              color: 'var(--accent-mint-text)', letterSpacing: '0.12em',
              textTransform: 'uppercase', marginBottom: 8,
            }}>// THE STACK</div>
            <h2 style={{
              fontFamily: 'Syne, sans-serif',
              fontSize: 'clamp(22px, 2.6vw, 32px)',
              fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.15,
            }}>
              Best tools. Not trendy ones.
            </h2>
          </div>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 14,
            color: 'var(--text-secondary)', maxWidth: 320, lineHeight: 1.55,
          }}>
            We pick what ships and survives, not what sounds good in a pitch.
          </p>
        </div>

        {/* Dense stack grid, 6 categories × 5 tools */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14,
          opacity: revealed ? 1 : 0,
          transition: 'opacity 0.7s ease 0.15s',
        }} className="ts-grid">
          {TECH_GROUPS.map((group, gi) => (
            <div key={gi} style={{
              padding: '16px 18px',
              background: 'var(--bg-secondary)',
              border: '1px solid var(--border-subtle)',
              borderLeft: `2px solid ${group.color}`,
              borderRadius: 10,
              transition: 'all 0.25s ease',
            }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = `${group.color}40`; e.currentTarget.style.borderLeftColor = group.color; e.currentTarget.style.background = 'var(--bg-tertiary)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-subtle)'; e.currentTarget.style.borderLeftColor = group.color; e.currentTarget.style.background = 'var(--bg-secondary)'; }}
            >
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 9.5,
                color: group.color, letterSpacing: '0.12em',
                marginBottom: 10,
              }}>{group.cat}</div>
              <div style={{
                fontFamily: 'Inter, sans-serif', fontSize: 13,
                color: 'var(--text-primary)', lineHeight: 1.65,
              }}>
                {group.tools.map((t, i) => (
                  <span key={i}>
                    {t}
                    {i < group.tools.length - 1 && (
                      <span style={{ color: 'var(--text-tertiary)', margin: '0 8px' }}>·</span>
                    )}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Honest note */}
        <div style={{
          marginTop: 24, padding: '12px 18px',
          background: 'var(--bg-secondary)',
          border: '1px solid var(--border-subtle)', borderRadius: 8,
          display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap',
          opacity: revealed ? 1 : 0, transition: 'opacity 0.6s ease 0.4s',
        }}>
          <span style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
            color: 'var(--accent-mint-text)', letterSpacing: '0.1em', flexShrink: 0,
          }}>// HONEST</span>
          <span style={{
            fontFamily: 'Inter, sans-serif', fontSize: 13,
            color: 'var(--text-secondary)', lineHeight: 1.5,
          }}>
            If we use n8n or Zapier for part of your build, we'll say so. Pretending we hand-coded everything when we didn't is the kind of thing that erodes trust.
          </span>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) { .ts-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 600px) { .ts-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { TechStack });