// How it works — tabbed view for subscriptions vs gifts
const HowItWorks = () => {
  const [tab, setTab] = React.useState('sub');
  const subSteps = [
    { icon: 'cookie', title: 'Choose your plan', copy: 'Monthly, 3, 6 or 12 months.' },
    { icon: 'truck', title: 'We bake & ship monthly', copy: 'Fresh each month, ships right away.' },
    { icon: 'heart', title: 'Enjoy (or skip, swap, pause)', copy: 'Fully flexible — manage from your account.' },
  ];
  const giftSteps = [
    { icon: 'calendar', title: 'Choose duration', copy: 'One-time, 3, 6 or 12 months.' },
    { icon: 'sparkle', title: 'Add message + address', copy: 'Handwritten gift note included.' },
    { icon: 'gift', title: 'We deliver monthly', copy: 'They get a surprise every month.' },
  ];
  const steps = tab === 'sub' ? subSteps : giftSteps;

  return (
    <section style={{ padding: '80px 0', background: '#fff' }}>
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 620, margin: '0 auto 40px' }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>How it works</div>
          <h2 className="serif" style={{ fontSize: 'clamp(32px, 3.4vw, 44px)', fontWeight: 500, margin: 0, letterSpacing: '-0.015em' }}>
            Simple from start to cookie.
          </h2>

          <div style={{
            display: 'inline-flex', gap: 6, padding: 6, borderRadius: 999,
            background: 'var(--cream-100)', border: '1px solid var(--brown-100)',
            marginTop: 24,
          }}>
            {[{k: 'sub', l: 'For Subscriptions'}, {k: 'gift', l: 'For Gifts'}].map(t => (
              <button key={t.k} onClick={() => setTab(t.k)}
                style={{
                  padding: '10px 22px', borderRadius: 999, fontSize: 14, fontWeight: 600,
                  background: tab === t.k ? 'var(--brown-700)' : 'transparent',
                  color: tab === t.k ? '#fff' : 'var(--brown-800)',
                  transition: 'background .2s, color .2s',
                }}>{t.l}</button>
            ))}
          </div>
        </div>

        <div className="steps-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, position: 'relative',
        }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              padding: '28px 24px',
              background: i % 2 === 0 ? 'var(--sky-50)' : 'var(--peach-50)',
              borderRadius: 20, position: 'relative',
              border: '1px solid var(--brown-100)',
            }}>
              <div style={{
                position: 'absolute', top: 22, right: 22,
                fontFamily: 'var(--serif)', fontSize: 48, fontWeight: 500,
                color: 'var(--brown-300)', lineHeight: 1,
              }}>
                0{i + 1}
              </div>
              <div style={{
                width: 48, height: 48, borderRadius: 14,
                background: '#fff', display: 'grid', placeItems: 'center',
                color: 'var(--brown-700)', marginBottom: 18,
                border: '1px solid var(--brown-100)',
              }}>
                <Icon name={s.icon} size={22}/>
              </div>
              <h3 className="serif" style={{ fontSize: 22, fontWeight: 500, margin: '0 0 8px', letterSpacing: '-0.01em' }}>
                {s.title}
              </h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--brown-700)', margin: 0 }}>
                {s.copy}
              </p>
            </div>
          ))}
        </div>

        <div style={{ textAlign: 'center', marginTop: 28 }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '10px 18px', background: 'var(--cream-50)', borderRadius: 999,
            fontSize: 13.5, color: 'var(--brown-700)', fontWeight: 500,
            border: '1px dashed var(--brown-300)',
          }}>
            <Icon name="check" size={15} stroke="var(--ok-green)" strokeWidth={2.2}/>
            Skip anytime · Swap flavors · Cancel easily
          </span>
        </div>
      </div>

      <style>{`
        @media (max-width: 800px) { .steps-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

Object.assign(window, { HowItWorks });