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

  const items = [
    {
      label: 'Case 01',
      tag: 'E-commerce engineering',
      title: 'Shopify + Claude Automation',
      desc: 'Launching additional regions and features in record time with AI prototyping and Shopify development automation with Claude.',
    },
    {
      label: 'Case 02',
      tag: 'Design systems',
      title: 'Claude × Figma Automation',
      desc: 'Connecting Claude with Figma to automate the design and development lifecycle, from variants to shipped components.',
    },
    {
      label: 'Case 03',
      tag: 'Operations',
      title: 'Google Workspace Automation',
      desc: 'Enabling Gemini and Google Apps Script to automate critical administrative work across Gmail, Drive, Sheets, and Calendar.',
    },
  ];

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

  return (
    <section id="work" style={{ padding: sectionPadding, maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ maxWidth: 720, marginBottom: isMobile ? 56 : 96 }}>
        <div className="eyebrow" style={{ marginBottom: 16 }}>Recent work</div>
        <h2 style={{
          fontSize: h2Size, fontWeight: 800, lineHeight: 0.95,
          letterSpacing: '-0.035em', color: 'var(--text-primary)', margin: 0,
        }}>
          Three engagements.<br />
          <span style={{ color: 'var(--text-tertiary)' }}>Three stacks.</span>
        </h2>
      </div>
      <div>
        {items.map((it, i) => (
          <div key={i} style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : '120px 1.2fr 1fr',
            gap: isMobile ? 12 : 32,
            padding: isMobile ? '32px 0' : '48px 0',
            borderTop: '1px solid var(--border)',
            borderBottom: i === items.length - 1 ? '1px solid var(--border)' : 'none',
            alignItems: 'baseline',
          }}>
            <div className="mono" style={{ color: 'var(--text-tertiary)', textTransform: 'uppercase' }}>
              {it.label}
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 8, color: 'var(--text-tertiary)' }}>{it.tag}</div>
              <h3 style={{
                fontSize: isMobile ? 26 : 36, fontWeight: 700, lineHeight: 1,
                letterSpacing: '-0.03em', color: 'var(--text-primary)', margin: 0,
              }}>{it.title}</h3>
            </div>
            <p style={{ fontSize: 17, lineHeight: 1.5, color: 'var(--text-secondary)', margin: 0 }}>
              {it.desc}
            </p>
          </div>
        ))}
      </div>
    </section>
  );
};