// One workflow vs six tools.
function Workflow() {
  const stack = [
    'Spreadsheet / Clay-style table',
    'LinkedIn research',
    'Contact enrichment',
    'Email drafting',
    'Sequencing tool',
    'CRM or pipeline board',
    'Manual reporting',
  ];
  const bp = [
    'Learns your business',
    'Finds best-fit companies',
    'Detects buyer signals',
    'Scores contacts',
    'Drafts outreach',
    'Runs the campaign',
    'Tracks replies in pipeline',
  ];
  return (
    <section className="bp-section" id="workflow">
      <div className="container">
        <SectionEyebrow num="05" label="Instead of stitching tools" />
        <div style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 1fr)',
          gap: 'clamp(32px, 5vw, 80px)', alignItems: 'end', marginBottom: 56,
        }}>
          <Reveal>
            <h2 className="t-h2" style={{ maxWidth: '16ch' }}>
              The outreach motion without the{' '}
              <span className="t-italic" style={{ color: 'var(--signal)' }}>six-tool stack.</span>
            </h2>
          </Reveal>
          <Reveal delay={120} className="t-lede" style={{ color: 'var(--fg-mute)', maxWidth: '42ch' }}>
            Small teams are expected to run the same outbound motion as much larger companies. BetterPipe puts that motion into one guided workspace.
          </Reveal>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
          gap: 16,
        }}>
          {/* Current stack */}
          <Reveal className="card" style={{ padding: 28, position: 'relative' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 22 }}>
              <div>
                <div className="upper-mono">Current stack</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, marginTop: 6, letterSpacing: '-0.02em' }}>Six jobs · seven tabs</div>
              </div>
              <Chip color="alarm" size="sm">fragmented</Chip>
            </div>
            <div className="stack-12">
              {stack.map((t, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: '12px 14px', borderRadius: 10,
                  background: 'var(--bg)', border: '1px solid var(--rule)',
                }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: 4,
                    background: 'var(--bg-3)', border: '1px solid var(--rule)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--fg-mute)',
                  }}>{i + 1}</span>
                  <span style={{ flex: 1, fontSize: 13, color: 'var(--fg)' }}>{t}</span>
                  <span style={{ width: 14, height: 1, background: 'var(--rule-strong)' }} />
                </div>
              ))}
            </div>
          </Reveal>

          {/* BetterPipe */}
          <Reveal delay={120} className="card" style={{
            padding: 28, position: 'relative',
            borderColor: 'color-mix(in srgb, var(--signal) 35%, var(--rule))',
            background: 'linear-gradient(180deg, color-mix(in srgb, var(--signal) 4%, var(--bg-2)), var(--bg-2) 30%)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 22 }}>
              <div>
                <div className="upper-mono" style={{ color: 'var(--signal)' }}>BetterPipe</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, marginTop: 6, letterSpacing: '-0.02em' }}>One guided workflow</div>
              </div>
              <Chip color="signal" size="sm">connected</Chip>
            </div>
            <div className="stack-12" style={{ position: 'relative' }}>
              {/* Vertical signal line behind */}
              <div style={{
                position: 'absolute', left: 11, top: 6, bottom: 6, width: 2,
                background: 'linear-gradient(180deg, color-mix(in srgb, var(--signal) 20%, transparent), var(--signal), color-mix(in srgb, var(--signal) 20%, transparent))',
                opacity: 0.5,
              }} />
              {bp.map((t, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: '12px 14px', borderRadius: 10,
                  background: 'var(--bg)', border: '1px solid color-mix(in srgb, var(--signal) 18%, var(--rule))',
                  position: 'relative',
                }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: '50%',
                    background: 'color-mix(in srgb, var(--signal) 25%, var(--bg))',
                    border: '1px solid var(--signal)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: 'var(--signal)', flexShrink: 0,
                  }}>
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                  </span>
                  <span style={{ flex: 1, fontSize: 13, color: 'var(--fg)' }}>{t}</span>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.Workflow = Workflow;