const TechStack = () => {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVisible(true); }, { threshold: 0.1 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const categories = [
    {
      label: 'Frontend',
      items: [
        { name: 'React', color: '#61DAFB', bg: '#E8F9FD', letter: 'R' },
        { name: 'Next.js', color: '#000', bg: '#F0F0F0', letter: 'N' },
        { name: 'TypeScript', color: '#3178C6', bg: '#EAF2FB', letter: 'TS' },
        { name: 'Vue.js', color: '#42B883', bg: '#E8F8F1', letter: 'V' },
        { name: 'Tailwind', color: '#06B6D4', bg: '#E0F7FA', letter: 'T' },
      ]
    },
    {
      label: 'Backend',
      items: [
        { name: 'Node.js', color: '#339933', bg: '#E8F5E9', letter: 'N' },
        { name: 'Python', color: '#3776AB', bg: '#EAF1FB', letter: 'Py' },
        { name: 'Django', color: '#092E20', bg: '#E0F0E9', letter: 'Dj' },
        { name: 'FastAPI', color: '#009688', bg: '#E0F2F1', letter: 'FA' },
        { name: 'GraphQL', color: '#E10098', bg: '#FCE4F5', letter: 'GQ' },
      ]
    },
    {
      label: 'AI & Data',
      items: [
        { name: 'TensorFlow', color: '#FF6F00', bg: '#FFF3E0', letter: 'TF' },
        { name: 'PyTorch', color: '#EE4C2C', bg: '#FDE9E6', letter: 'PT' },
        { name: 'OpenAI', color: '#10A37F', bg: '#E3F5EF', letter: 'AI' },
        { name: 'LangChain', color: '#1C3D5A', bg: '#E8EFF5', letter: 'LC' },
        { name: 'Pandas', color: '#150458', bg: '#ECEAF6', letter: 'Pd' },
      ]
    },
    {
      label: 'Cloud & DevOps',
      items: [
        { name: 'AWS', color: '#FF9900', bg: '#FFF4E0', letter: 'AWS' },
        { name: 'GCP', color: '#4285F4', bg: '#EAF1FE', letter: 'GCP' },
        { name: 'Docker', color: '#2496ED', bg: '#E8F4FD', letter: 'D' },
        { name: 'Kubernetes', color: '#326CE5', bg: '#EAF0FB', letter: 'K8s' },
        { name: 'GitHub CI', color: '#24292F', bg: '#ECEDEF', letter: 'CI' },
      ]
    },
    {
      label: 'Database',
      items: [
        { name: 'PostgreSQL', color: '#336791', bg: '#EAF0F8', letter: 'PG' },
        { name: 'MongoDB', color: '#47A248', bg: '#E8F5E9', letter: 'MG' },
        { name: 'Redis', color: '#DC382D', bg: '#FDEEEC', letter: 'Re' },
        { name: 'Supabase', color: '#3ECF8E', bg: '#E5F9F0', letter: 'Su' },
        { name: 'Pinecone', color: '#1A1A2E', bg: '#ECEDF5', letter: 'Pi' },
      ]
    },
    {
      label: 'Blockchain',
      items: [
        { name: 'Ethereum', color: '#627EEA', bg: '#EEF0FD', letter: 'ETH' },
        { name: 'Solana', color: '#9945FF', bg: '#F3EAFF', letter: 'SOL' },
        { name: 'Hardhat', color: '#F0C000', bg: '#FFFBE6', letter: 'HH' },
        { name: 'IPFS', color: '#65C2CB', bg: '#E6F7F8', letter: 'IP' },
        { name: 'Chainlink', color: '#375BD2', bg: '#EBF0FB', letter: 'CL' },
      ]
    },
  ];

  return (
    <section id="tech-stack" data-screen-label="Tech Stack" ref={ref} style={{ padding: '100px 0', background: 'var(--bg2, #f8fafc)' }}>
      <div className="inner-wrap" style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ textAlign: 'center', maxWidth: 520, margin: '0 auto 56px', opacity: visible ? 1 : 0, transform: visible ? 'translateY(0)' : 'translateY(24px)', transition: 'all 0.6s ease' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '5px 14px', borderRadius: 100, background: 'var(--accentbg)', border: '1px solid rgba(37,99,235,0.18)', marginBottom: 18 }}>
            <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, fontWeight: 600, color: 'var(--accent, #1d4ed8)', letterSpacing: '0.07em' }}>TECH STACK</span>
          </div>
          <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 'clamp(28px, 4vw, 44px)', fontWeight: 700, color: 'var(--text, #0f172a)', letterSpacing: '-0.03em', lineHeight: 1.1, margin: '0 0 14px' }}>
            Built with best-in-class tools
          </h2>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, color: 'var(--text2, #64748b)', lineHeight: 1.7, margin: 0 }}>
            We use proven, production-grade technologies across every layer of the stack.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16 }}>
          {categories.map((cat, ci) => (
            <div key={ci} className="dm-card" style={{
              padding: '24px', borderRadius: 14, background: 'var(--bg3, #fff)',
              border: '1.5px solid var(--border)', boxShadow: 'var(--shadow)',
              opacity: visible ? 1 : 0, transform: visible ? 'translateY(0)' : 'translateY(20px)',
              transition: `all 0.6s ease ${ci * 0.07}s`,
            }}>
              <h4 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 13, fontWeight: 700, color: 'var(--accent, #1d4ed8)', letterSpacing: '0.07em', textTransform: 'uppercase', margin: '0 0 16px' }}>{cat.label}</h4>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {cat.items.map((item, ii) => (
                  <div key={ii} style={{
                    display: 'flex', alignItems: 'center', gap: 7,
                    padding: '6px 12px', borderRadius: 8,
                    background: 'var(--bg2, #f8fafc)', border: '1px solid var(--border)',
                    transition: 'all 0.18s', cursor: 'default',
                  }}
                  onMouseEnter={e => { e.currentTarget.style.borderColor = item.color; e.currentTarget.style.background = item.bg; }}
                  onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.background = 'var(--bg2, #f8fafc)'; }}>
                    <div style={{ width: 22, height: 22, borderRadius: 5, background: item.bg, border: `1px solid ${item.color}30`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 8, fontWeight: 800, color: item.color, letterSpacing: '-0.02em' }}>{item.letter}</span>
                    </div>
                    <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 500, color: 'var(--text, #0f172a)' }}>{item.name}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { TechStack });