// How it works — 4 guided steps. A connected vertical/horizontal flow with mini UI snippets.
function StepUI({ step }) {
  // Different abstracted UI for each step
  if (step === 1) {
    return (
      <div style={{ padding: 14 }}>
        <div className="upper-mono" style={{ marginBottom: 10 }}>Tell us</div>
        <div style={{
          padding: '10px 12px', borderRadius: 8, border: '1px solid var(--rule-strong)',
          background: 'var(--bg)', fontFamily: 'var(--font-mono)', fontSize: 12,
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <span style={{ color: 'var(--fg-mute)' }}>https://</span>
          <span style={{ color: 'var(--fg)' }}>yourbusiness.com</span>
          <span className="cursor" />
        </div>
        <div style={{ marginTop: 10, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {['ICP', 'Best clients', 'Description'].map(t => (
            <span key={t} style={{ padding: '4px 8px', borderRadius: 6, fontSize: 10, fontFamily: 'var(--font-mono)', background: 'var(--bg-3)', border: '1px solid var(--rule)', color: 'var(--fg-mute)' }}>{t}</span>
          ))}
        </div>
      </div>
    );
  }
  if (step === 2) {
    return (
      <div style={{ padding: 14 }}>
        <div className="upper-mono" style={{ marginBottom: 10 }}>Found · 14 fits</div>
        <div className="stack-12">
          {[
            { n: 'Northwind Logistics', s: 94 },
            { n: 'Veridian Health', s: 91 },
            { n: 'Rivermark Capital', s: 88 },
          ].map((c, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 8,
              padding: '8px 10px', borderRadius: 6, background: 'var(--bg)', border: '1px solid var(--rule)',
            }}>
              <div style={{ flex: 1, fontSize: 12, color: 'var(--fg)' }}>{c.n}</div>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600,
                color: 'var(--signal)',
              }}>{c.s}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }
  if (step === 3) {
    return (
      <div style={{ padding: 14 }}>
        <div className="upper-mono" style={{ marginBottom: 10 }}>Review angles</div>
        <div style={{
          padding: 12, borderRadius: 8, background: 'var(--bg)', border: '1px solid var(--rule)',
          fontFamily: 'var(--font-mono)', fontSize: 11, lineHeight: 1.6,
        }}>
          <div style={{ color: 'var(--fg-mute)' }}>// angle</div>
          <div style={{ color: 'var(--fg)' }}>"hiring 2 ops roles → handoff drag"</div>
          <div style={{ color: 'var(--fg-mute)', marginTop: 8 }}>// confidence</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ color: 'var(--signal)' }}>●●●●</span>
            <span style={{ color: 'var(--fg-mute)' }}>●</span>
            <span style={{ color: 'var(--fg-mute)', marginLeft: 4 }}>strong</span>
          </div>
        </div>
      </div>
    );
  }
  if (step === 4) {
    return (
      <div style={{ padding: 14 }}>
        <div className="upper-mono" style={{ marginBottom: 10 }}>Pipeline</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
          {[
            { l: 'Sent', n: 24, c: 'var(--fg-mute)' },
            { l: 'Reply', n: 6, c: 'var(--amber)' },
            { l: 'Mtg', n: 3, c: 'var(--signal)' },
          ].map((s, i) => (
            <div key={i} style={{
              padding: '10px 8px', borderRadius: 6, background: 'var(--bg)', border: '1px solid var(--rule)',
              textAlign: 'center',
            }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--fg-mute)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{s.l}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, color: s.c, marginTop: 4 }}>{s.n}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }
  return null;
}

function HowItWorks() {
  const steps = [
    {
      n: '01',
      title: 'BetterPipe learns who you are.',
      body: 'Your website, best customers, and a short description are all it takes. BetterPipe builds a working model of your offer and ideal buyers — in minutes.',
    },
    {
      n: '02',
      title: 'BetterPipe finds companies showing the right signals.',
      body: 'Companies and people showing real evidence surface automatically — hiring activity, role changes, repeated postings, LinkedIn posts, modernization moves.',
    },
    {
      n: '03',
      title: 'BetterPipe shows you the campaign logic.',
      body: 'Target criteria, company rationale, signal evidence, and outreach angles are all laid out before anything goes out. You approve, edit, or push back.',
    },
    {
      n: '04',
      title: 'BetterPipe runs outreach and manages replies.',
      body: 'Email, LinkedIn, phone, and manual follow-up run from one campaign flow. Replies land in your pipeline with clear next steps.',
    },
  ];
  return (
    <section className="bp-section dotgrid" id="how">
      <div className="container">
        <SectionEyebrow num="02" label="How it works" />
        <div style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 1fr)',
          gap: 'clamp(32px, 5vw, 80px)', alignItems: 'end', marginBottom: 64,
        }}>
          <Reveal>
            <h2 className="t-h2" style={{ maxWidth: '18ch' }}>
              From website to outreach campaign in{' '}
              <span className="t-italic" style={{ color: 'var(--signal)' }}>four guided steps.</span>
            </h2>
          </Reveal>
          <Reveal delay={120} className="t-lede" style={{ color: 'var(--fg-mute)', maxWidth: '40ch' }}>
            You stay in the loop at every step — BetterPipe shows its reasoning. Nothing goes out until you approve it.
          </Reveal>
        </div>

        {/* Steps row */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
          gap: 16, position: 'relative',
        }}>
          {steps.map((s, i) => (
            <Reveal key={i} delay={i * 100} className="card" style={{ overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
              {/* Mini UI top */}
              <div style={{
                background: 'var(--bg-3)',
                borderBottom: '1px solid var(--rule)',
                minHeight: 130,
              }}>
                <StepUI step={i + 1} />
              </div>
              {/* Body */}
              <div style={{ padding: 22, flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
                    color: 'var(--signal)',
                  }}>{s.n}</span>
                  <span style={{ height: 1, flex: 1, background: 'var(--rule)' }} />
                </div>
                <h3 style={{
                  fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 18,
                  letterSpacing: '-0.02em', lineHeight: 1.2, color: 'var(--fg)',
                  marginBottom: 12,
                }}>{s.title}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--fg-mute)' }}>{s.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.HowItWorks = HowItWorks;