const HowItWorks = () => {
  const steps = [
    { n: '01', title: 'Connect', desc: 'Sign in, sync your wearable, and tell us a little about your goals & routine.', ill: 'wearables + profile' },
    { n: '02', title: 'Log effortlessly', desc: 'Photograph a meal, scan a label, or speak it. Indian recipes recognised natively.', ill: 'meal logging' },
    { n: '03', title: 'Get coached', desc: 'AI surfaces patterns and suggests one small change at a time. No information overload.', ill: 'AI insights' },
    { n: '04', title: 'See progress', desc: 'Weekly snapshots, biomarker trends, and habit streaks that compound into long-term health.', ill: 'trends + diagnostics' },
  ];
  return (
    <section id="how">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">How it works</span>
          <h2 className="display">From signup to a smarter you, in four small steps.</h2>
        </div>
        <div className="how-grid">
          {steps.map((s, i) => (
            <div key={s.n} className="how-card reveal">
              <div className="step">STEP {s.n}</div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <div className="ill">
                <svg width="100%" height="100%" viewBox="0 0 240 100" preserveAspectRatio="none">
                  <defs>
                    <pattern id={`ptn-${i}`} x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
                      <line x1="0" y1="10" x2="10" y2="0" stroke="rgba(14,17,22,0.06)" strokeWidth="1"/>
                    </pattern>
                  </defs>
                  <rect width="100%" height="100%" fill={`url(#ptn-${i})`}/>
                </svg>
                <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', textTransform: 'uppercase', letterSpacing: '0.14em' }}>
                  {s.ill}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { HowItWorks });