function Requirements() {
  const reqIncluded = [
    'Six CGM sensors — three months of glucose measurement',
    'The Eivi app and coaching',
    'Live sessions, feedback and more',
  ];

  const CheckIcon = () => (
    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" style={{ flexShrink: 0, marginTop: 1 }}>
      <circle cx="11" cy="11" r="11" fill="var(--teal)"/>
      <polyline points="6,11 9.5,14.5 16,8" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );

  const ScaleIcon = () => (
    <svg width="52" height="52" viewBox="0 0 24 24" fill="none">
      <rect x="2.5" y="9" width="19" height="12" rx="4" fill="#fff" stroke="#444" strokeWidth="1.4"/>
      <rect x="7" y="12.5" width="10" height="4.5" rx="1.5" fill="#F0F0F0" stroke="#888" strokeWidth="1"/>
      <line x1="9.5" y1="14.75" x2="14.5" y2="14.75" stroke="#555" strokeWidth="1.4" strokeLinecap="round"/>
      <path d="M6.5 9Q12 3.5 17.5 9" stroke="#444" strokeWidth="1.4" strokeLinecap="round" fill="none"/>
    </svg>
  );

  return (
    <section style={{ padding: 'clamp(96px, 13vw, 160px) clamp(24px, 5vw, 64px)' }}>
      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
        <p className="eyebrow-text" style={{ color: 'var(--fg-accent)', marginBottom: '20px' }}>Requirements</p>
        <h2 className="t-h2" style={{ margin: '0 0 clamp(20px, 3vw, 28px)' }}>What's needed from you?</h2>
        <p className="t-body" style={{ color: 'var(--fg-secondary)', margin: '0 0 clamp(48px, 7vw, 72px)', lineHeight: 1.65 }}>
          The main thing you need is the desire to understand your body and make changes. Because this is a tech-connected programme to measure your biodata, you will also need hardware:
        </p>

        <div className="req-grid">
          <div className="req-card req-included">
            <p className="req-card-label req-label-teal">What's included</p>
            <ul className="req-list">
              {reqIncluded.map((item, i) => (
                <li key={i} className="req-item">
                  <CheckIcon />
                  <span>{item}</span>
                </li>
              ))}
            </ul>
            <a href="/join.html" style={{
              display: 'block',
              marginTop: 'clamp(24px, 3vw, 32px)',
              padding: '14px 24px',
              background: 'var(--teal)',
              color: '#fff',
              borderRadius: 'var(--radius-pill)',
              textAlign: 'center',
              fontWeight: 500,
              fontSize: '1rem',
              textDecoration: 'none',
            }}>Join the waitlist</a>
          </div>

          <div className="req-card req-purchase">
            <p className="req-card-label">What you'll need to buy</p>
            <div className="req-purchase-items">
              <div className="req-purchase-item">
                <div className="req-photo-row">
                  <img src="./assets/photos/fitbit-air.png" alt="Fitbit Air" className="req-photo"/>
                  <img src="./assets/photos/apple-watch.png" alt="Apple Watch" className="req-photo"/>
                </div>
                <p className="req-item-name">Fitness tracker</p>
                <p className="req-item-detail">Apple Watch or Fitbit Air</p>
              </div>
              <div className="req-purchase-item">
                <div className="req-photo-row">
                  <img src="./assets/photos/smart-scale.png" alt="Smart scale" className="req-photo" style={{ width: '100%' }}/>
                </div>
                <p className="req-item-name">Smart scale</p>
                <p className="req-item-detail">Connects to Apple Health or Google Health</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .req-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: clamp(16px, 2.5vw, 20px);
        }
        @media (min-width: 640px) {
          .req-grid { grid-template-columns: 1fr 1fr; }
        }
        .req-card {
          border-radius: 20px;
          padding: clamp(28px, 4vw, 40px);
        }
        .req-included {
          background: var(--teal-15);
          border: 1px solid var(--teal-30);
        }
        .req-purchase {
          background: #F5F5F5;
          border: 1px solid #E8E8E8;
        }
        .req-card-label {
          margin: 0 0 24px;
          font-size: 13px;
          font-weight: 500;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          color: var(--fg-secondary);
        }
        .req-label-teal { color: var(--teal); }
        .req-list {
          list-style: none;
          margin: 0;
          padding: 0;
          display: flex;
          flex-direction: column;
          gap: 18px;
        }
        .req-item {
          display: flex;
          align-items: flex-start;
          gap: 14px;
          font-size: 18px;
          font-weight: 500;
          color: var(--fg-primary);
          line-height: 1.4;
        }
        .req-purchase-items {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
        }
        .req-purchase-item {
          background: #fff;
          border: 1px solid #E0E0E0;
          border-radius: 14px;
          padding: 20px 16px;
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
        .req-purchase-icon {
          margin-bottom: 4px;
        }
        .req-photo-row {
          display: flex;
          flex-direction: column;
          gap: 6px;
          margin-bottom: 4px;
          height: 120px;
        }
        .req-photo {
          flex: 1;
          width: 100%;
          min-height: 0;
          object-fit: contain;
          background: #F5F5F5;
          border-radius: 10px;
          padding: 8px;
        }
        .req-item-name {
          margin: 0;
          font-size: 17px;
          font-weight: 500;
          color: var(--fg-primary);
          line-height: 1.3;
        }
        .req-item-detail {
          margin: 0;
          font-size: 14px;
          color: var(--fg-secondary);
          line-height: 1.5;
        }
      `}</style>
    </section>
  );
}
window.Requirements = Requirements;