/* HowItWorks.jsx — three numbered steps. */

function HowItWorks() {
  return (
    <section className="section" id="how" data-screen-label="03 How it works">
      <div className="container">
        <div className="how-head">
          <div className="eyebrow">How it works</div>
          <h2 className="h-section">Three steps. Then every morning.</h2>
        </div>
        <div className="how-grid">
          <div className="step">
            <span className="num">01</span>
            <h4>Subscribe your feeds.</h4>
            <p>Your university calendar, your work calendar, your gym, your group chat plans. Paste any iCal URL or drop an .ics — every feed sits beside the others.</p>
          </div>
          <div className="step">
            <span className="num">02</span>
            <h4>Import your health data.</h4>
            <p>Drag in your Apple Health export. Once. Sleep, heart rate, steps, workouts and recovery come along for the ride.</p>
          </div>
          <div className="step">
            <span className="num">03</span>
            <h4>Open one page.</h4>
            <p>Your day, your body, your mind, beside each other, every morning. No more checking five tabs to start the day.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

window.HowItWorks = HowItWorks;