const STEPS = [
  {
    n: '01',
    title: 'Watches locally',
    body: 'A small model runs on your laptop and reads what you’re working on — the app, the window, the file. Nothing is ever sent anywhere.',
    tag: 'ON-DEVICE MODEL',
  },
  {
    n: '02',
    title: 'Builds your day',
    body: 'Every signal gets sorted into the project it belongs to, automatically, as you work — no start/stop timer, no manual entry.',
    tag: 'AUTO-CLASSIFIED',
  },
  {
    n: '03',
    title: 'Ready to bill',
    body: 'Review the day, adjust anything that looks off, export a clean timesheet or invoice. Billable hours, without the busywork.',
    tag: 'ONE-CLICK EXPORT',
  },
];

const TraceHowItWorks = () => {
  const t = window.TRACE;
  return (
    <section id="how-it-works" className="trace-how" style={{
      padding: '40px 48px 100px', fontFamily: t.sans,
      borderTop: `1px solid ${t.hair}`,
    }}>
      <div style={{ textAlign: 'center', marginBottom: 64 }}>
        <Eyebrow style={{ justifyContent: 'center', display: 'flex', marginBottom: 14 }}>How it works</Eyebrow>
        <h2 style={{
          fontFamily: t.sans, fontSize: 'clamp(30px, 3.6vw, 44px)',
          letterSpacing: '-0.02em', fontWeight: 700, color: t.ink, margin: 0,
        }}>
          Three steps. Zero effort.
        </h2>
      </div>

      <div className="trace-how-grid" style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0,1fr))', gap: 28,
        maxWidth: 1080, margin: '0 auto',
      }}>
        {STEPS.map(s => (
          <Card key={s.n} padding={28} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ fontFamily: t.serif, fontSize: 34, color: t.faint }}>{s.n}</div>
            <h3 style={{ fontSize: 19, fontWeight: 600, color: t.ink, margin: 0 }}>{s.title}</h3>
            <p style={{ fontSize: 14.5, lineHeight: 1.6, color: t.dim, margin: 0, flex: 1 }}>{s.body}</p>
            <div style={{
              fontSize: 11, letterSpacing: '0.08em', color: t.faint,
              paddingTop: 12, borderTop: `1px solid ${t.hair2}`,
            }}>{s.tag}</div>
          </Card>
        ))}
      </div>
    </section>
  );
};

window.TraceHowItWorks = TraceHowItWorks;