window.CaseStudies = function CaseStudies({ tweaks }) {
  const isMobile = useIsMobile();
  const isTablet = useIsTablet();
  const studies = [
    {
      name: 'Shopify + Claude Automation',
      tag: 'E-commerce engineering',
      d: 'Launching additional regions and features in record time with AI prototyping and Shopify development automation with Claude.',
    },
    {
      name: 'Claude × Figma Automation',
      tag: 'Design systems',
      d: 'Connecting Claude with Figma to automate the design and development lifecycle, from variants to shipped components.',
    },
    {
      name: 'Google Workspace Automation',
      tag: 'Operations',
      d: 'Enabling Gemini and Google Apps Script to automate critical administrative work across Gmail, Drive, Sheets, and Calendar.',
    },
  ];

  const sectionPadding = isMobile ? '64px 16px' : isTablet ? '80px 32px' : '96px 48px';
  const introMargin = isMobile ? 40 : 48;
  const h2Size = isMobile ? 32 : isTablet ? 38 : 44;
  // 3 cards: 3 cols on desktop, 1 col on tablet/mobile (3 doesn't fit cleanly into 2)
  const gridCols = isTablet ? '1fr' : '1fr 1fr 1fr';
  const gridGap = isMobile ? 16 : 24;
  const cardH3Size = isMobile ? 20 : 22;

  return (
    <section id="work" style={{ padding: sectionPadding, maxWidth: 1120, margin: '0 auto', borderTop: '1px solid var(--linen-deep)' }}>
      <div style={{ marginBottom: introMargin, maxWidth: 640 }}>
        <div style={{ font: '600 12px/1.4 Inter, sans-serif', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--thread-deep)', marginBottom: 16 }}>Recent work</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: h2Size, lineHeight: 1.1, letterSpacing: '-0.015em', color: 'var(--ink)' }}>
          Three engagements. Three stacks. Same approach.
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: gridCols, gap: gridGap }}>
        {studies.map((s, i) => (
          <FadeInCard key={i} delay={i * 0.08}>
            <div
              className={'card' + (i === 1 ? ' card--featured' : '')}
              style={{ padding: 28, height: '100%', display: 'flex', flexDirection: 'column' }}
            >
              <div style={{ font: '400 11px "JetBrains Mono", monospace', color: 'var(--slate)', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 8 }}>
                {s.tag}
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: cardH3Size, color: 'var(--ink)', letterSpacing: '-0.01em', margin: '0 0 16px', lineHeight: 1.2 }}>
                {s.name}
              </h3>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--graphite)', margin: 0, flex: 1 }}>
                {s.d}
              </p>
            </div>
          </FadeInCard>
        ))}
      </div>
    </section>
  );
};