/* global React */
// How it works — three steps.
function HowItWorks() {
  React.useEffect(() => { requestAnimationFrame(() => window.lucide && window.lucide.createIcons()); });
  const steps = [
    { n: '01', icon: 'link', title: 'Connect your accounts', body: 'Link your financial data in seconds. Reconciliation starts straight away.' },
    { n: '02', icon: 'scan-search', title: 'We work the exceptions', body: 'Every unexplained or uncategorised item is analysed, explained in plain English, and matched to an account.' },
    { n: '03', icon: 'check-check', title: 'You approve in one tap', body: 'Skim the reasoning, confirm the fix. What used to take hours of digging is cleared in minutes.' },
  ];
  return (
    <section id="how-it-works" style={{ background: 'var(--surface-card)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'var(--section-y) var(--container-pad)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '14px', maxWidth: '40ch', marginBottom: '52px' }}>
          <span className="ds-eyebrow">How it works</span>
          <h2 style={{ fontSize: 'clamp(1.9rem,3.4vw,2.6rem)', fontWeight: 700, letterSpacing: '-0.025em', color: 'var(--ink-900)' }}>
            Live in minutes. Reconciled the same day.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '40px' }} className="rai-step-grid">
          {steps.map((s, i) => (
            <div key={s.n} style={{ display: 'flex', flexDirection: 'column', gap: '16px', position: 'relative' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                <span style={{
                  width: 44, height: 44, borderRadius: 'var(--radius-md)', flex: 'none',
                  background: 'var(--ink-900)', color: 'var(--cyan-400)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <i data-lucide={s.icon} style={{ width: 21, height: 21 }}></i>
                </span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: '13px', fontWeight: 600, color: 'var(--cyan-600)', letterSpacing: '0.04em' }}>{s.n}</span>
              </div>
              <h3 style={{ fontSize: '19px', fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--ink-900)' }}>{s.title}</h3>
              <p style={{ fontSize: '15px', lineHeight: 1.6, color: 'var(--text-muted)', margin: 0 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.HowItWorks = HowItWorks;