window.Pillars = function Pillars() {
  const isMobile = useIsMobile();
  const isTablet = useIsTablet();

  const items = [
    { label: '01', title: 'Engineering', desc: 'AI in your dev pipeline. Agentic workflows, custom apps, and internal tools shipped at agentic speed.' },
    { label: '02', title: 'Design', desc: 'Agentic design loops. Briefs to Figma to shipped components without a handoff meeting.' },
    { label: '03', title: 'Workspaces', desc: 'Gemini and Apps Script automating busywork across Workspaces, Slack, and more.' },
  ];

  const sectionPadding = isMobile ? '80px 24px' : isTablet ? '112px 32px' : '160px 48px';
  const h2Size = isMobile ? 40 : isTablet ? 56 : 88;

  return (
    <section id="pillars" style={{ padding: sectionPadding, maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ maxWidth: 720, marginBottom: isMobile ? 56 : 96 }}>
        <div className="eyebrow" style={{ marginBottom: 16 }}>How it works</div>
        <h2 style={{
          fontSize: h2Size, fontWeight: 800, lineHeight: 0.95,
          letterSpacing: '-0.035em', color: 'var(--text-primary)', margin: 0,
        }}>
          Three disciplines.<br />
          <span style={{ color: 'var(--text-tertiary)' }}>Same operating model.</span>
        </h2>
      </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : isTablet ? '1fr 1fr' : 'repeat(3, 1fr)',
        gap: 1,
        background: 'var(--border)',
        borderTop: '1px solid var(--border)',
        borderBottom: '1px solid var(--border)',
      }}>
        {items.map((it, i) => (
          <div key={i} style={{
            background: 'var(--bg)',
            padding: isMobile ? '40px 0' : '48px 32px',
            display: 'flex', flexDirection: 'column',
            minHeight: isMobile ? 'auto' : 320,
          }}>
            <div className="mono" style={{ color: 'var(--text-tertiary)', marginBottom: 24 }}>{it.label}</div>
            <h3 style={{
              fontSize: isMobile ? 32 : 44, fontWeight: 700, lineHeight: 1,
              letterSpacing: '-0.03em', color: 'var(--text-primary)', margin: '0 0 16px',
            }}>{it.title}</h3>
            <p style={{
              fontSize: 17, lineHeight: 1.5,
              color: 'var(--text-secondary)', margin: 0, flex: 1,
            }}>{it.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
};