function Industries() {
  return (
    <Section id="industries" background="var(--paper)">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'end', marginBottom: 72 }} className="sse-ind-header">
        <div>
          <Kicker>§ 03 · Industries we serve</Kicker>
          <Display size={72} style={{ marginTop: 24 }}>
            Wherever there's a hazardous zone, an SSE part earns its keep.
          </Display>
        </div>
        <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--steel-dark)', maxWidth: 460 }}>
          Our components ship into some of the most demanding industrial environments in India — refineries, chemical plants, textile mills, power stations, pharmaceutical facilities and beyond.
        </p>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 0,
        border: '1px solid var(--line)',
        borderRadius: 8,
        overflow: 'hidden',
        background: 'var(--paper-warm)',
      }} className="sse-ind-grid">
        {INDUSTRIES.map((ind, i) => (
          <IndustryCell key={ind.name} ind={ind} idx={i} />
        ))}
      </div>

      <style>{`
        @media (max-width: 1100px) {
          .sse-ind-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 900px) {
          .sse-ind-header { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 560px) {
          .sse-ind-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </Section>
  );
}

function IndustryCell({ ind, idx }) {
  const [hover, setHover] = React.useState(false);
  const col = idx % 4;
  const row = Math.floor(idx / 4);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        padding: '36px 32px',
        borderRight: col < 3 ? '1px solid var(--line)' : 'none',
        borderBottom: row < 1 ? '1px solid var(--line)' : 'none',
        background: hover ? 'var(--navy)' : 'transparent',
        color: hover ? 'var(--paper)' : 'var(--navy)',
        transition: 'all 0.35s cubic-bezier(0.4,0,0.2,1)',
        position: 'relative',
        cursor: 'default',
        minHeight: 220,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}>
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'flex-start',
      }}>
        <Hex size={52} stroke={hover ? 'var(--amber)' : 'var(--navy)'} strokeWidth={1.2}>
          <span style={{
            fontFamily: 'var(--font-mono)',
            fontSize: 13,
            fontWeight: 600,
            color: hover ? 'var(--amber)' : 'var(--navy)',
            transition: 'color 0.35s',
          }}>
            {String(idx + 1).padStart(2, '0')}
          </span>
        </Hex>
        <div style={{
          fontFamily: 'var(--font-mono)',
          fontSize: 10,
          letterSpacing: '0.15em',
          textTransform: 'uppercase',
          color: hover ? 'var(--amber)' : 'var(--steel-dark)',
          transition: 'color 0.35s',
        }}>
          {ind.code}
        </div>
      </div>

      <div>
        <div style={{
          fontFamily: 'var(--font-display)',
          fontSize: 28,
          fontWeight: 500,
          letterSpacing: '-0.02em',
          lineHeight: 1.05,
          marginBottom: 8,
          textWrap: 'balance',
        }}>
          {ind.name}
        </div>
        <div style={{
          fontSize: 14,
          lineHeight: 1.4,
          color: hover ? 'rgba(245,243,238,0.7)' : 'var(--steel-dark)',
          transition: 'color 0.35s',
        }}>
          {ind.desc}
        </div>
      </div>

      {hover && (
        <div style={{
          position: 'absolute',
          top: 20, right: 20,
          color: 'var(--amber)',
          animation: 'sse-fadein 0.3s',
        }}>
          <Arrow size={18} />
        </div>
      )}
      <style>{`
        @keyframes sse-fadein {
          from { opacity: 0; }
          to { opacity: 1; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { Industries });