// Use cases — 4 personas.
const USECASES = [
  {
    tag: 'Recruiting agencies',
    headline: 'Find companies showing hiring pain before they ask for help.',
    body: 'Spot reposted roles, new leaders, hiring surges, team changes, and signals that suggest a company may need recruiting support.',
    signals: ['Reposted roles', 'Hiring surges', 'New VP People'],
  },
  {
    tag: 'Consultants & agencies',
    headline: 'Find businesses already showing the symptoms you solve.',
    body: 'Use public signals to identify companies dealing with operational complexity, modernization pressure, growth, or process strain.',
    signals: ['Process strain', 'Growth phase', 'New leadership'],
  },
  {
    tag: 'AI & automation firms',
    headline: 'Find companies ready to modernize.',
    body: 'Surface teams hiring around operations, talking about AI, running legacy systems, or showing signs that manual work is slowing them down.',
    signals: ['AI-adjacent hiring', 'Legacy system mentions', 'Modernization posts'],
  },
  {
    tag: 'Founder-led sales',
    headline: 'Get more clients like your best clients.',
    body: 'Turn what you know about your best customers into a repeatable outbound motion — before you hire your first sales team.',
    signals: ['Lookalike fit', 'Founder voice', 'Manual follow-up'],
  },
];

function UseCases() {
  const [active, setActive] = React.useState(0);
  return (
    <section className="bp-section dotgrid" id="usecases">
      <div className="container">
        <SectionEyebrow num="01" label="Built for" />
        <Reveal>
          <h2 className="t-h2" style={{ maxWidth: '16ch', marginBottom: 56 }}>
            Built for small B2B teams selling{' '}
            <span className="t-italic" style={{ color: 'var(--signal)' }}>high-value work.</span>
          </h2>
        </Reveal>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 280px) minmax(0, 1fr)',
          gap: 32, alignItems: 'start',
        }} className="usecase-grid">
          {/* Tab list */}
          <div className="stack-12">
            {USECASES.map((u, i) => (
              <button
                key={i}
                onClick={() => setActive(i)}
                onMouseEnter={() => setActive(i)}
                style={{
                  textAlign: 'left',
                  padding: '16px 18px',
                  background: active === i ? 'var(--bg-2)' : 'transparent',
                  border: `1px solid ${active === i ? 'color-mix(in srgb, var(--signal) 30%, var(--rule))' : 'var(--rule)'}`,
                  borderRadius: 10,
                  cursor: 'pointer',
                  color: 'var(--fg)',
                  transition: 'background 200ms, border-color 200ms',
                }}
              >
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                }}>
                  <span style={{
                    width: 8, height: 8, borderRadius: '50%',
                    background: active === i ? 'var(--signal)' : 'var(--rule-strong)',
                    transition: 'background 200ms',
                  }} />
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 11,
                    letterSpacing: '0.06em', textTransform: 'uppercase',
                    color: active === i ? 'var(--signal)' : 'var(--fg-mute)',
                  }}>0{i + 1}</span>
                  <span style={{
                    fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 500,
                    letterSpacing: '-0.01em',
                  }}>{u.tag}</span>
                </div>
              </button>
            ))}
          </div>

          {/* Active panel */}
          <div className="card" style={{ padding: 'clamp(24px, 4vw, 40px)', minHeight: 360, position: 'relative' }}>
            {USECASES.map((u, i) => (
              <div key={i} style={{
                opacity: active === i ? 1 : 0,
                position: active === i ? 'relative' : 'absolute',
                inset: active === i ? 'auto' : 0,
                padding: active === i ? 0 : 'clamp(24px, 4vw, 40px)',
                transition: 'opacity 350ms var(--ease-out)',
                pointerEvents: active === i ? 'auto' : 'none',
                display: 'grid',
                gridTemplateColumns: '1fr 1fr',
                gridTemplateRows: 'auto 1fr auto',
                gap: '18px 40px',
              }}>
                {/* Left col: eyebrow + headline */}
                <div style={{ gridColumn: '1', gridRow: '1 / 3' }}>
                  <div className="upper-mono" style={{ marginBottom: 14, color: 'var(--signal)' }}>Use case 0{i + 1}</div>
                  <h3 className="t-h2" style={{
                    fontSize: 'clamp(1.5rem, 2.6vw, 2.25rem)',
                    marginBottom: 0,
                  }}>{u.headline}</h3>
                </div>
                {/* Right col: body */}
                <div style={{ gridColumn: '2', gridRow: '1' }}>
                  <div className="upper-mono" style={{ marginBottom: 10 }}>About</div>
                  <p className="t-lede" style={{ color: 'var(--fg-mute)' }}>
                    {u.body}
                  </p>
                </div>
                {/* Right col: signals */}
                <div style={{ gridColumn: '2', gridRow: '2', alignSelf: 'end' }}>
                  <div className="upper-mono" style={{ marginBottom: 10 }}>Signals that matter</div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                    {u.signals.map(s => <Chip key={s} color="signal">{s}</Chip>)}
                  </div>
                </div>
                {/* Bottom rule */}
                <div style={{
                  gridColumn: '1 / -1', gridRow: '3',
                  borderTop: '1px solid var(--rule)',
                  paddingTop: 18,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                }}>
                  <span className="upper-mono">{u.tag}</span>
                  <span className="upper-mono" style={{ color: 'var(--signal)' }}>0{i + 1} / 04</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) {
          .usecase-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

window.UseCases = UseCases;