// Stack.jsx — Felipe Fin Fanfa

function Stack() {
  const { lang } = React.useContext(window.LangContext);
  const t = window.ffT[lang].stack;

  return (
    <section id="stack" style={{
      background: 'rgba(4,8,15,0.76)', padding: '120px 24px',
      position: 'relative', overflow: 'hidden', zIndex: 1,
      borderTop: '1px solid rgba(206,212,242,0.05)',
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <div className="ff-reveal" style={{
          fontFamily: 'Geist Mono, monospace', fontSize: 11.5, fontWeight: 500,
          color: '#1C60DA', letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 28,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <span style={{ width: 24, height: 1, background: '#1C60DA' }} />
          {t.section}
        </div>

        <h2 data-build="words" data-stagger="55" style={{
          fontFamily: 'Geist, sans-serif', fontWeight: 700, fontSize: 'clamp(32px, 4.6vw, 56px)',
          color: '#CED4F2', letterSpacing: '-0.035em', lineHeight: 1.05,
          margin: '0 0 16px', maxWidth: 720, textWrap: 'balance',
        }}>
          {t.heading}
        </h2>
        <p className="ff-reveal" style={{
          fontFamily: 'Geist, sans-serif', fontSize: 17, color: '#707AA9',
          lineHeight: 1.65, margin: '0 0 56px', maxWidth: 540,
        }}>
          {t.sub}
        </p>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          {t.groups.map(g => (
            <div key={g.label} data-build="fade" data-y="30" className="ff-stack-row" style={{
              display: 'grid', gridTemplateColumns: 'minmax(160px, 200px) 1fr',
              gap: 'clamp(24px, 4vw, 64px)',
              paddingTop: 24, borderTop: '1px solid rgba(206,212,242,0.07)',
            }}>
              <div style={{ fontFamily: 'Geist Mono, monospace', fontSize: 11.5, color: '#455084', letterSpacing: '0.08em', textTransform: 'uppercase', paddingTop: 6 }}>
                {g.label}
              </div>
              <div data-build="stagger" data-stagger="40" data-dist="16" data-dur="700" style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {g.items.map(item => <Chip key={item} label={item} />)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Chip({ label }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <span
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        fontFamily: 'Geist, sans-serif', fontSize: 13.5, fontWeight: 500,
        color: hovered ? '#CED4F2' : '#A5ACCD',
        background: hovered ? 'rgba(28,96,218,0.10)' : 'rgba(206,212,242,0.04)',
        border: `1px solid ${hovered ? 'rgba(28,96,218,0.35)' : 'rgba(206,212,242,0.1)'}`,
        padding: '8px 14px', borderRadius: 999,
        transition: 'all 200ms cubic-bezier(0.4,0,0.2,1)',
        cursor: 'default',
      }}>{label}</span>
  );
}

Object.assign(window, { Stack });