// Outreach: before/after comparison, with the "after" message animated in.
function Outreach() {
  const [phase, setPhase] = React.useState(0);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && phase === 0) {
          // Reveal in order
          setTimeout(() => setPhase(1), 200);
          setTimeout(() => setPhase(2), 1100);
          setTimeout(() => setPhase(3), 2000);
          setTimeout(() => setPhase(4), 2800);
          io.disconnect();
        }
      });
    }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
  }, [phase]);

  return (
    <section className="bp-section" id="outreach" ref={ref}>
      <div className="container">
        <SectionEyebrow num="04" label="The message itself" />
        <Reveal style={{ marginBottom: 56 }}>
          <h2 className="t-h2" style={{ maxWidth: '20ch' }}>
            Signals in.{' '}
            <span className="t-italic" style={{ color: 'var(--signal)' }}>Outreach out.</span>
          </h2>
        </Reveal>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
          gap: 20,
          position: 'relative',
        }}>
          {/* BEFORE */}
          <Reveal className="card" style={{ position: 'relative', overflow: 'hidden' }}>
            <div style={{
              padding: '14px 18px', borderBottom: '1px solid var(--rule)',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              background: 'var(--bg-3)',
            }}>
              <div className="upper-mono">Generic outbound</div>
              <Chip color="alarm" size="sm">ignored</Chip>
            </div>
            <div style={{ padding: 24 }}>
              <div className="upper-mono" style={{ marginBottom: 10, fontSize: 10 }}>To: Sarah Chen · COO · Veridian Health</div>
              <p style={{
                fontSize: 15, lineHeight: 1.6, color: 'var(--fg-mute)',
                fontFamily: 'var(--font-body)', fontStyle: 'italic',
              }}>
                Hi Sarah, I saw you are VP of Operations at Acme. We help operations teams improve efficiency. Are you open to a quick call?
              </p>
              <div style={{
                marginTop: 20, padding: '10px 12px', borderRadius: 8,
                border: '1px dashed var(--rule-strong)',
                fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-mute)',
                lineHeight: 1.5,
              }}>
                <span style={{ color: 'var(--alarm)' }}>×</span> No reason for the timing.<br/>
                <span style={{ color: 'var(--alarm)' }}>×</span> No evidence behind the claim.<br/>
                <span style={{ color: 'var(--alarm)' }}>×</span> Wrong title (and they know).
              </div>
            </div>
          </Reveal>

          {/* AFTER */}
          <Reveal delay={120} className="card" style={{
            position: 'relative', overflow: 'hidden',
            borderColor: 'color-mix(in srgb, var(--signal) 35%, var(--rule))',
          }}>
            <div style={{
              padding: '14px 18px', borderBottom: '1px solid color-mix(in srgb, var(--signal) 25%, var(--rule))',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              background: 'color-mix(in srgb, var(--signal) 8%, var(--bg-3))',
            }}>
              <div className="upper-mono" style={{ color: 'var(--signal)' }}>Evidence-based</div>
              <Chip color="signal" size="sm">3 signals</Chip>
            </div>
            <div style={{ padding: 24 }}>
              <div className="upper-mono" style={{ marginBottom: 10, fontSize: 10 }}>To: Sarah Chen · COO · Veridian Health</div>
              <p style={{
                fontSize: 15, lineHeight: 1.65, color: 'var(--fg)',
                minHeight: 145,
              }}>
                Hi Sarah —{' '}
                <span style={{ opacity: phase >= 1 ? 1 : 0, transition: 'opacity 400ms' }}>
                  noticed Veridian{' '}
                  <span className="ev" style={{ opacity: phase >= 2 ? 1 : 0.4, transition: 'opacity 400ms' }}>
                    has reposted two ops roles
                  </span>
                  {' '}tied to implementation and customer onboarding.
                </span>
                <span style={{ opacity: phase >= 3 ? 1 : 0, transition: 'opacity 400ms' }}>
                  {' '}That usually points to{' '}
                  <span className="ev">pressure around process handoffs</span>{' '}
                  as teams scale.
                </span>
                <span style={{ opacity: phase >= 4 ? 1 : 0, transition: 'opacity 400ms' }}>
                  {' '}We help firms{' '}
                  <span className="ev">clean up those workflows</span>{' '}
                  before they turn into delivery drag. Worth comparing notes?
                </span>
                {phase < 4 && <span className="cursor" />}
              </p>
              <div style={{
                marginTop: 20, padding: '12px 14px', borderRadius: 8,
                background: 'var(--bg)',
                border: '1px solid color-mix(in srgb, var(--signal) 30%, var(--rule))',
              }}>
                <div className="upper-mono" style={{ fontSize: 9, marginBottom: 8, color: 'var(--signal)' }}>Linked evidence</div>
                <div className="stack-12" style={{ gap: 6 }}>
                  {[
                    { t: 'Reposted role · 28 days open', s: 'job board' },
                    { t: 'Two ops-adjacent listings · 14d', s: 'LinkedIn Jobs' },
                    { t: 'New COO Sarah Chen · 21d ago', s: 'profile change' },
                  ].map((e, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }}>
                      <span style={{
                        width: 6, height: 6, borderRadius: '50%',
                        background: 'var(--signal)', flexShrink: 0,
                      }} />
                      <span style={{ flex: 1, color: 'var(--fg)' }}>{e.t}</span>
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-mute)' }}>{e.s}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.Outreach = Outreach;