/* global React, Icon, Stars, Badge */

function Features() {
  const f = [
    ['leaf', 'Gentle, not harsh', 'Soluble psyllium fibre that softens and adds bulk — no stimulant laxatives, no urgency.'],
    ['activity', 'Made for GLP-1s', 'Targets the slowed digestion and constipation that Ozempic, Wegovy & Mounjaro can cause.'],
    ['flask-conical', '3rd-party tested', 'Every batch lab-tested for contaminants. Vegan, UK made, food-supplement compliant.'],
    ['calendar-check', 'One simple habit', 'Two capsules a day with water. 120 per bottle — a full two-month supply.']
  ];
  return (
    <section style={{ background: 'var(--white)', borderTop: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '76px 28px' }}>
        <p style={{ textAlign: 'center', fontSize: 13, letterSpacing: '.12em', textTransform: 'uppercase',
          fontWeight: 700, color: 'var(--green-600)', margin: '0 0 12px' }}>Why Psyllify</p>
        <h2 style={{ textAlign: 'center', margin: '0 0 48px', fontSize: 40, fontWeight: 800,
          letterSpacing: '-.02em', color: '#000' }}>Regularity, made effortless</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 22 }}>
          {f.map(([ic, t, d]) => (
            <div key={t} style={{ background: 'var(--cream)', border: '1px solid var(--line)',
              borderRadius: 18, padding: 24 }}>
              <div style={{ width: 48, height: 48, borderRadius: 12, background: 'var(--green-100)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                <Icon name={ic} size={24} color="var(--green-600)" />
              </div>
              <h4 style={{ margin: '0 0 8px', fontSize: 19, fontWeight: 700, color: 'var(--green-900)' }}>{t}</h4>
              <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: 'var(--ink-600)' }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    ['Take 2 capsules daily', 'With a full glass of water, morning or evening — whenever suits your routine.'],
    ['Fibre gets to work', 'Psyllium absorbs water to gently soften and add bulk, easing slowed GLP-1 digestion.'],
    ['Stay comfortably regular', 'Most customers feel a difference within the first week of consistent use.']
  ];
  return (
    <section style={{ maxWidth: 1100, margin: '0 auto', padding: '76px 28px' }}>
      <h2 style={{ textAlign: 'center', margin: '0 0 48px', fontSize: 40, fontWeight: 800,
        letterSpacing: '-.02em', color: '#000' }}>How it works</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 30 }}>
        {steps.map((s, i) => (
          <div key={i} style={{ textAlign: 'center' }}>
            <div style={{ width: 52, height: 52, borderRadius: 999, background: 'var(--green-600)',
              color: '#fff', fontWeight: 800, fontSize: 22, display: 'flex', alignItems: 'center',
              justifyContent: 'center', margin: '0 auto 18px' }}>{i + 1}</div>
            <h4 style={{ margin: '0 0 10px', fontSize: 20, fontWeight: 700, color: 'var(--green-900)' }}>{s[0]}</h4>
            <p style={{ margin: 0, fontSize: 15.5, lineHeight: 1.6, color: 'var(--ink-600)' }}>{s[1]}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Features, HowItWorks });