function UsingEivi() {
  const steps = [
    {
      num: '01',
      heading: 'Track your glucose',
      body: 'Eivi tracks your blood glucose and other biodata automatically, via sensor and watch.',
      img: '/assets/how-it-works/step-01.png',
    },
    {
      num: '02',
      heading: 'Add your updates',
      body: 'You log items on your timeline: just snap a photo.',
      img: '/assets/how-it-works/step-02.png',
    },
    {
      num: '03',
      heading: 'Receive feedback',
      body: 'Eivi gives you feedback and guidance on each meal. You\'ll learn your energy system.',
      img: '/assets/how-it-works/step-03.png',
    },
    {
      num: '04',
      heading: 'Rapid results',
      body: 'With data and feedback you\'ll \'connect the dots\' between food and weight loss – a permanent shift in mindset.',
      img: '/assets/how-it-works/step-04.png',
    },
    {
      num: '05',
      heading: 'Your support network',
      body: 'Eivi\'s community lets you ask questions and get support from peers, in a private setting.',
      img: '/assets/how-it-works/step-05.png',
    },
  ];

  const usingEiviStyles = {
    section: {
      padding: 'clamp(96px, 13vw, 160px) clamp(24px, 5vw, 64px)',
      background: 'var(--bg-canvas)',
    },
    inner: {
      maxWidth: '1200px',
      margin: '0 auto',
    },
    sectionLabel: {
      color: 'var(--fg-accent)',
      marginBottom: '20px',
    },
    sectionHeading: {
      margin: '0 0 clamp(64px, 10vw, 112px)',
      color: 'var(--fg-primary)',
    },
    stepWrap: {
      display: 'flex',
      flexDirection: 'column',
      gap: 'clamp(64px, 10vw, 112px)',
    },
    stepRow: (reverse) => ({
      display: 'grid',
      gridTemplateColumns: '1fr',
      gap: 'clamp(40px, 6vw, 80px)',
      alignItems: 'center',
    }),
    textCol: {
      display: 'flex',
      flexDirection: 'column',
      gap: '20px',
    },
    headingRow: {
      display: 'flex',
      alignItems: 'baseline',
      gap: '16px',
    },
    stepNum: {
      fontSize: '32px',
      lineHeight: 1.1,
      fontWeight: 500,
      letterSpacing: '-0.02em',
      color: 'var(--grey-300)',
      flexShrink: 0,
    },
    heading: {
      margin: 0,
      fontSize: '32px',
      lineHeight: 1.1,
      letterSpacing: '-0.02em',
      fontWeight: 500,
      color: 'var(--fg-primary)',
    },
    body: {
      margin: 0,
      color: 'var(--fg-secondary)',
    },
    imgWrap: {
      borderRadius: 'clamp(16px, 2vw, 24px)',
      overflow: 'hidden',
      background: 'var(--bg-subtle)',
    },
    img: {
      width: '100%',
      height: 'auto',
      display: 'block',
    },
  };

  return (
    <section style={usingEiviStyles.section}>
      <div style={usingEiviStyles.inner}>
        <p className="eyebrow-text" style={usingEiviStyles.sectionLabel}>Using Eivi</p>
        <h2 className="t-h2" style={usingEiviStyles.sectionHeading}>
          How the programme works
        </h2>

        <div style={usingEiviStyles.stepWrap}>
          {steps.map((step, i) => {
            const reverse = i % 2 !== 0;
            const textCol = (
              <div style={usingEiviStyles.textCol} className="using-eivi-text">
                <div style={usingEiviStyles.headingRow} className="using-eivi-heading-row">
                  <span style={usingEiviStyles.stepNum}>{step.num}</span>
                  <h3 style={usingEiviStyles.heading}>{step.heading}</h3>
                </div>
                <p className="t-body" style={usingEiviStyles.body}>{step.body}</p>
              </div>
            );
            const imgCol = (
              <div style={usingEiviStyles.imgWrap} className="using-eivi-img">
                <img src={step.img} alt={step.heading} style={usingEiviStyles.img} />
              </div>
            );
            return (
              <div
                key={step.num}
                className="using-eivi-row"
                style={{ '--cols': reverse ? '2fr 1fr' : '1fr 2fr' }}
              >
                {reverse ? [imgCol, textCol] : [textCol, imgCol]}
              </div>
            );
          })}
        </div>
      </div>

      <style>{`
        @media (max-width: 639px) {
          .using-eivi-row { display: flex; flex-direction: column; gap: clamp(24px, 5vw, 40px); }
          .using-eivi-text { order: -1; }
        }
        @media (min-width: 640px) {
          .using-eivi-row {
            display: grid !important;
            grid-template-columns: var(--cols) !important;
            align-items: center;
            gap: clamp(40px, 6vw, 80px);
          }
          .using-eivi-heading-row {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 8px !important;
          }
        }
      `}</style>
    </section>
  );
}

window.UsingEivi = UsingEivi;