function WhoItsFor() {
  const mobile = useIsMobile();
  const industries = [
    { tag: 'PROFESSIONAL SERVICES', body: 'Consulting, advisory, and project-based firms. Same proposals. Same reports. Same billing cycle every month. The client work changes. The admin behind it does not.' },
    { tag: 'FINANCIAL SERVICES', body: 'Insurance agencies, wealth management, equipment leasing, and lending offices. Every client relationship comes with a paper trail. Most of it is still tracked by hand.' },
    { tag: 'TRADES AND CONSTRUCTION', body: 'HVAC, plumbing, electrical, GCs, and remodelers. The job is running fine. The quoting, dispatch, and paperwork behind it are not.' },
    { tag: 'FAMILY-OWNED', body: 'Built over decades. Run by the owner. Everyone knows what needs to change. Nobody has had the time to change it.' },
  ];

  const fits = [
    "You're running a 5–50 person team.",
    "Revenue is $500K+ and growing without much help from software.",
    "You've tried ChatGPT, decided it wasn't for you, and moved on.",
    "There's one task on your team that eats hours and shouldn't.",
  ];

  return (
    <section id="who">
      <div className="container">
        <div style={{ marginBottom: 48 }}>
          <motion.div {...fadeUp(0)} style={{ marginBottom: 16 }}>
            <span className="eyebrow" style={{ color: 'var(--muted)' }}>04 · WHO IT'S FOR</span>
          </motion.div>
          <motion.h2 {...fadeUp(0.06)} className="h2" style={{ marginBottom: 24 }}>
            REAL OPERATIONS.<br />NOT TECH STARTUPS.
          </motion.h2>
          <motion.p {...fadeUp(0.12)} className="body-muted" style={{ maxWidth: 620 }}>
            We work with the businesses that built themselves over decades — companies where the
            owner is still in the work, the team is small enough to know each other, and the
            tools that worked five years ago still mostly work today.
          </motion.p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : 'repeat(2, 1fr)',
          gridAutoRows: 'minmax(140px, 1fr)',
          gap: 14,
        }}>
          {industries.map((ind, i) => (
            <motion.div key={ind.tag}
              {...fadeUp(i * 0.05)}
              style={{
                background: 'transparent',
                border: '1px solid var(--border)',
                borderRadius: 4,
                padding: 26,
                display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                gap: 14, minHeight: 150,
                transition: 'border-color 200ms ease',
              }}
              onMouseEnter={e => e.currentTarget.style.borderColor = 'rgba(var(--accent-rgb),0.4)'}
              onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border)'}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{
                  fontFamily: "'Space Mono', monospace", fontWeight: 700, fontSize: 11,
                  letterSpacing: '0.22em', color: 'var(--accent)',
                }}>{ind.tag}</span>
                <span style={{
                  fontFamily: "'Space Mono', monospace", fontSize: 10,
                  color: 'var(--muted-2)', letterSpacing: '0.16em',
                }}>{String(i + 1).padStart(2, '0')}</span>
              </div>
              <p className="body-muted" style={{ fontSize: 12 }}>{ind.body}</p>
            </motion.div>
          ))}
        </div>

        <motion.div {...fadeUp(0.2)} style={{
          marginTop: 56,
          padding: '32px 28px',
          border: '1px solid rgba(var(--accent-rgb),0.25)',
          borderRadius: 4,
          background: 'rgba(var(--accent-rgb),0.04)',
        }}>
          <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 18 }}>
            YOU'RE A GOOD FIT IF
          </div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 12 }}>
            {fits.map((f, i) => (
              <li key={i} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <span style={{
                  fontFamily: "'Space Mono', monospace", fontSize: 11,
                  color: 'var(--accent)', fontWeight: 700,
                  letterSpacing: '0.16em',
                }}>{i + 1}</span>
                <span className="body" style={{ fontSize: 13 }}>{f}</span>
              </li>
            ))}
          </ul>
        </motion.div>
      </div>
    </section>
  );
}

Object.assign(window, { WhoItsFor });