function ProcessSteps() {
  const psSteps = [
    {
      pending: true,
      icon: (
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <rect x="1" y="4" width="22" height="16" rx="2" ry="2"/>
          <line x1="1" y1="10" x2="23" y2="10"/>
        </svg>
      ),
      name: 'Place an order',
      sub: 'Order online via credit card',
    },
    {
      pending: true,
      icon: (
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 3L2 7v10l10 5 10-5V7L12 3z"/>
          <line x1="12" y1="3" x2="12" y2="22"/>
          <path d="M2 7l10 5 10-5"/>
        </svg>
      ),
      name: 'Kit is shipped',
      sub: "We'll send three months of CGM sensors",
    },
    {
      icon: (
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
        </svg>
      ),
      name: 'Start tracking',
      sub: 'Apply your first sensor, begin the process',
    },
    {
      icon: (
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/>
          <polyline points="17 6 23 6 23 12"/>
        </svg>
      ),
      name: 'Log and learn',
      sub: 'See how your metabolism works',
    },
    {
      icon: (
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
          <line x1="16" y1="2" x2="16" y2="6"/>
          <line x1="8" y1="2" x2="8" y2="6"/>
          <line x1="3" y1="10" x2="21" y2="10"/>
        </svg>
      ),
      name: '3 month programme',
      sub: '6 sensors for 24-7 tracking and coaching',
    },
  ];

  return (
    <section style={{
      padding: 'clamp(96px, 13vw, 160px) clamp(24px, 5vw, 64px)',
      background: 'var(--bg-subtle)',
    }}>
      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
        <p className="eyebrow-text" style={{ color: 'var(--fg-accent)', marginBottom: '20px' }}>
          Timeline
        </p>
        <h2 className="t-h2" style={{ margin: '0 0 clamp(64px, 10vw, 96px)' }}>
          The process
        </h2>

        <div className="ps-track">
          {psSteps.map((step, i) => (
            <div key={i} className={'ps-step' + (step.pending ? ' ps-pending' : '')}>
              <div className="ps-node">{step.icon}</div>
              <div className="ps-text">
                <p className="ps-name">{step.name}</p>
                <p className="ps-sub">{step.sub}</p>
              </div>
            </div>
          ))}
        </div>
        <p className="t-body" style={{ marginTop: 'clamp(40px, 6vw, 64px)', color: 'var(--fg-secondary)' }}>
          After the three month programme, you will have the option to renew for a longer term.
        </p>
      </div>

      <style>{`
        /* Shared node + text styles */
        .ps-node {
          width: 56px;
          height: 56px;
          border-radius: 50%;
          background: var(--teal-15);
          border: 2px solid var(--teal-30);
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--teal);
          position: relative;
          z-index: 1;
          flex-shrink: 0;
        }
        .ps-pending .ps-node {
          background: #F0F0F0;
          border-color: #CCCCCC;
          color: #AAAAAA;
        }
        .ps-name {
          margin: 0;
          font-size: 17px;
          font-weight: 500;
          color: var(--fg-primary);
          line-height: 1.3;
        }
        .ps-sub {
          margin: 6px 0 0;
          font-size: 15px;
          color: var(--fg-secondary);
          line-height: 1.5;
        }

        /* Mobile: vertical stack with left line */
        .ps-track {
          display: flex;
          flex-direction: column;
          position: relative;
        }
        .ps-track::before {
          content: '';
          position: absolute;
          top: 28px;
          left: 27px;
          bottom: 28px;
          width: 2px;
          background: linear-gradient(to bottom, #CCCCCC 50%, var(--teal-30) 50%);
          pointer-events: none;
        }
        .ps-step {
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          text-align: left;
          gap: 20px;
          padding: 0 0 40px;
        }
        .ps-step:last-child { padding-bottom: 0; }

        /* Tablet: single row with connecting line, same as desktop */
        @media (min-width: 640px) and (max-width: 1023px) {
          .ps-track {
            flex-direction: row;
            flex-wrap: nowrap;
          }
          .ps-track::before {
            top: 27px;
            left: 10%;
            right: 10%;
            bottom: auto;
            width: auto;
            height: 2px;
            background: linear-gradient(to right, #CCCCCC 50%, var(--teal-30) 50%);
          }
          .ps-step {
            flex: 1;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 20px;
            padding: 0 8px;
          }
        }

        /* Desktop: single row with connecting line */
        @media (min-width: 1024px) {
          .ps-track {
            flex-direction: row;
            flex-wrap: nowrap;
          }
          .ps-track::before {
            top: 27px;
            left: 10%;
            right: 10%;
            bottom: auto;
            width: auto;
            height: 2px;
            background: linear-gradient(to right, #CCCCCC 50%, var(--teal-30) 50%);
          }
          .ps-step {
            flex: 1;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 20px;
            padding: 0 8px;
          }
        }
      `}</style>
    </section>
  );
}

window.ProcessSteps = ProcessSteps;