function Who() {
  const isMobile = useMediaQuery('(max-width: 768px)');
  const segments = [
    {
      icon: (
        <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
          <path d="M3 8h16l-1 11H4L3 8Z M7 8V5a4 4 0 0 1 8 0v3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
      label: 'Restaurants',
      detail: 'Take orders, handle reservations, answer menu questions in real time.',
      tag: '12,400 calls/mo',
    },
    {
      icon: (
        <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
          <path d="M11 3v16M3 11h16" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
          <rect x="2" y="2" width="18" height="18" rx="3" stroke="currentColor" strokeWidth="1.4"/>
        </svg>
      ),
      label: 'Clinics & healthcare',
      detail: 'Book appointments, answer FAQs, send reminders without staff overhead.',
      tag: 'HIPAA-aware',
    },
    {
      icon: (
        <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
          <path d="M3 8 11 3l8 5v11H3V8Z M9 19v-6h4v6" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
        </svg>
      ),
      label: 'Real estate',
      detail: 'Qualify inbound inquiries, capture intent, book site visits automatically.',
      tag: 'Lead routing',
    },
    {
      icon: (
        <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
          <path d="M3 6h16l-2 10H5L3 6Z M7 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z M16 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
        </svg>
      ),
      label: 'E-commerce & retail',
      detail: 'Order status, returns, complaints, product info — handled end-to-end.',
      tag: 'CRM sync',
    },
  ];

  return (
    <section id="who" style={{
      maxWidth: 1440, margin: '0 auto',
      padding: isMobile ? '64px 20px 48px' : '120px 48px 80px',
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.4fr', gap: isMobile ? 36 : 72, alignItems: 'start' }}>
        <div>
          <div className="mono" style={{
            fontSize: 11, color: 'var(--ink-3)',
            letterSpacing: '0.1em', marginBottom: 16,
          }}>
            01 — WHO IT'S FOR
          </div>
          <h2 style={{
            fontSize: 'clamp(40px, 4.6vw, 64px)',
            lineHeight: 1.02,
            letterSpacing: '-0.02em',
            marginBottom: 24,
          }}>
            <span className="serif">Built for </span>
            <span style={{ fontWeight: 500 }}>any business</span>
            <span className="serif"> that<br/>can't afford to </span>
            <span className="serif italic">miss a ring.</span>
          </h2>
          <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.6, maxWidth: 380 }}>
            If your business gets repetitive inbound calls and your staff can't keep up — or shouldn't have to — CallAxis handles it.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 1, background: 'var(--line)', border: '1px solid var(--line)', borderRadius: 20, overflow: 'hidden' }}>
          {segments.map((s, i) => (
            <div key={i} style={{
              background: 'var(--bg)',
              padding: isMobile ? '24px 20px' : '32px 28px',
              minHeight: isMobile ? 0 : 200,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              gap: 20,
              transition: 'background 0.2s',
            }}
            onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-2)'}
            onMouseLeave={(e) => e.currentTarget.style.background = 'var(--bg)'}
            >
              <div style={{ color: 'var(--accent-ink)' }}>
                {s.icon}
              </div>
              <div>
                <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 8, letterSpacing: '-0.01em' }}>
                  {s.label}
                </div>
                <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.5, marginBottom: 16 }}>
                  {s.detail}
                </div>
                <span className="mono" style={{
                  fontSize: 10, letterSpacing: '0.08em',
                  color: 'var(--ink-3)',
                  padding: '4px 8px',
                  background: 'var(--bg-2)',
                  borderRadius: 999,
                  border: '1px solid var(--line-2)',
                }}>
                  {s.tag.toUpperCase()}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Who = Who;