// HOW IT WORKS — 3 simple steps

function HowItWorks() {
  const steps = [
    { n: '01', t: 'Connect your inbox', s: 'Scrub uses OAuth, never stores passwords.', icon: '⤓' },
    { n: '02', t: 'Scrub reads in the background', s: 'AI scans, extracts and classifies.', icon: '◐' },
    { n: '03', t: 'Never open your inbox again', s: 'Daily WhatsApp digest and real-time pings for important stuff.', icon: '↗' },
  ];
  return (
    <section id="how" className="rs-section" style={{
      position: 'relative', padding: '120px 0',
      background: 'var(--bg-cream)', color: 'var(--ink-cream)',
      overflow: 'hidden'
    }}>
      <div className="rs-container" style={{ position: 'relative', maxWidth: 1240, margin: '0 auto', padding: '0 32px' }}>
        <div className="rs-how-head" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, marginBottom: 60, alignItems: 'end' }}>
          <div>
            <Reveal><SectionMark num="06" label="How it works" /></Reveal>
            <Reveal delay={100}>
              <h2 style={{
                fontFamily: 'var(--serif)', fontWeight: 400,
                fontSize: 'clamp(2.2rem, 5vw, 4.4rem)', lineHeight: 1,
                letterSpacing: '-0.03em', margin: '24px 0 0', textWrap: 'balance'
              }}>
                Thirty seconds<br />to set up. <span className="italic" style={{ color: 'var(--accent)' }}>Forever</span> to keep.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={200}>
            <span />
          </Reveal>
        </div>

        <div className="rs-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {steps.map((s, i) => (
            <Reveal key={i} delay={i * 120}>
              <div className="rs-how-step" style={{
                position: 'relative', padding: '32px 24px',
                background: 'white',
                border: '1px solid var(--hair-lt)',
                borderRadius: 16, height: '100%',
                display: 'flex', flexDirection: 'column'
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', color: 'var(--ink-cream-faint)' }}>STEP / {s.n}</span>
                  <span style={{
                    width: 36, height: 36, borderRadius: '50%',
                    border: '1px solid var(--accent)', color: 'var(--accent)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 18
                  }}>{s.icon}</span>
                </div>
                <div className="rs-how-title" style={{
                  fontFamily: 'var(--serif)', fontSize: 26, lineHeight: 1.1,
                  letterSpacing: '-0.02em', marginBottom: 12
                }}>{s.t}</div>
                <div style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-cream-mute)', fontWeight: 300 }}>{s.s}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.HowItWorks = HowItWorks;