// Section 3, How it works (4 columns, no icons)
const HowItWorks = () => {
  const steps = [
    {
      n: '01',
      title: 'Start with intelligence',
      body: 'Drop in your company name. Public data, hiring patterns, reviews, press, and competitive moves become a picture of where your business actually is. You begin with a starting point, not a blank page.',
    },
    {
      n: '02',
      title: 'Shape your challenge',
      body: '3 to 5 specific challenges are drafted from the research as a starting point. Pick one, change the framing, push back, rewrite. You decide what your team gets asked, the AI is the second pair of eyes.',
    },
    {
      n: '03',
      title: 'Your team responds',
      body: 'One link in Slack, Teams, or email. No accounts, no sign-up, no app to download. Completable in under five minutes on a phone.',
    },
    {
      n: '04',
      title: 'You decide, we synthesise',
      body: 'Submissions ranked, clustered, and scored across four dimensions. Describe the solution you are going with, credit is calculated automatically and your team hears back. The loop closes.',
    },
  ];
  return (
    <section style={{ background: T.paper, padding: '120px 32px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <SectionLabel>How it works</SectionLabel>
          <h2 className="display" style={{
            fontSize: 'clamp(28px, 3.4vw, 40px)',
            fontWeight: 700, letterSpacing: -0.6, color: T.ink,
            lineHeight: 1.15,
          }}>
            Four steps from your company name<br />to a strategy report.
          </h2>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 28,
          position: 'relative',
        }}>
          {/* connecting line */}
          <div aria-hidden style={{
            position: 'absolute', top: 28, left: '12.5%', right: '12.5%',
            height: 1, background: `repeating-linear-gradient(90deg, ${T.border} 0 6px, transparent 6px 12px)`,
            zIndex: 0,
          }} />
          {steps.map((s, i) => (
            <div key={s.n} style={{ position: 'relative', zIndex: 1 }}>
              <div style={{
                width: 56, height: 56, borderRadius: 12,
                background: T.greenTint,
                border: `1px solid ${T.border}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 24,
              }}>
                <span className="display" style={{
                  fontSize: 18, fontWeight: 700, color: T.greenDark, letterSpacing: -0.2,
                }}>{s.n}</span>
              </div>
              <h3 style={{
                fontSize: 22, fontWeight: 700, color: T.ink,
                letterSpacing: -0.4, marginBottom: 12, lineHeight: 1.25,
              }}>{s.title}</h3>
              <p style={{
                fontSize: 15.5, lineHeight: 1.65, color: T.ink2,
              }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
window.HowItWorks = HowItWorks;