/* SaveSection — Double Up Oklahoma + an interactive savings slider.
   Dark forest section: the "make your money go further" moment. */
function SaveSection({ lang }) {
  const { Card, Pill, Button } = window.OasisFreshMarketEBTSNAPGuideDesignSystem_23fc30;
  const [spend, setSpend] = React.useState(20);
  const matched = Math.min(spend, 20); // DUO matches up to a daily cap (illustrative)
  const total = spend + matched;

  return (
    <section id="save" style={{ background: 'var(--surface-forest-deep)', padding: 'var(--space-20) 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(90% 70% at 80% 0%, rgba(227,161,44,0.16), transparent 55%)', pointerEvents: 'none' }} />
      <div className="oasis-container" style={{ position: 'relative' }}>
        <SectionHead
          onForest
          eyebrow={t(lang, 'Save more', 'Ahorra más')}
          title={t(lang, 'Turn $1 into $2 on fresh produce', 'Convierte $1 en $2 en frutas y verduras')}
          intro={t(lang, 'Double Up Oklahoma matches what you spend on fruits and vegetables. Spend EBT dollars on produce, earn the same amount back to spend on more produce.', 'Double Up Oklahoma iguala lo que gastas en frutas y verduras. Gasta dólares EBT en productos frescos y gana la misma cantidad para comprar más.')}
        />

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 'var(--space-6)', alignItems: 'stretch' }}>
          {/* Interactive matcher */}
          <Card tone="forest" pad="lg" style={{ background: 'var(--forest-700)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
              <Icon name="Coins" size={26} stroke="var(--gold-400)" />
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-extra)', fontSize: 'var(--fs-h4)', color: 'var(--cream-50)' }}>{t(lang, 'See your match', 'Ve tu igualación')}</span>
            </div>
            <div style={{ color: 'var(--text-on-forest-muted)', fontSize: 'var(--fs-small)', marginBottom: 8 }}>
              {t(lang, 'I spend this much EBT on produce:', 'Gasto esto de EBT en frutas/verduras:')}
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-black)', fontSize: 48, color: 'var(--gold-400)', lineHeight: 1 }}>${spend}</div>
            <input type="range" min="5" max="40" step="1" value={spend} onChange={(e) => setSpend(+e.target.value)}
              className="oasis-range" style={{ width: '100%', margin: '18px 0 24px' }} />
            <div style={{ display: 'flex', gap: 12 }}>
              <div style={{ flex: 1, textAlign: 'center', padding: '14px 8px', background: 'var(--forest-800)', borderRadius: 'var(--radius-md)' }}>
                <div style={{ fontSize: 'var(--fs-caption)', color: 'var(--text-on-forest-muted)' }}>{t(lang, 'You spend', 'Gastas')}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-bold)', fontSize: 24, color: 'var(--cream-50)' }}>${spend}</div>
              </div>
              <div style={{ flex: 1, textAlign: 'center', padding: '14px 8px', background: 'var(--gold-500)', borderRadius: 'var(--radius-md)' }}>
                <div style={{ fontSize: 'var(--fs-caption)', color: 'var(--forest-900)', fontWeight: 600 }}>{t(lang, 'You get back', 'Recuperas')}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-black)', fontSize: 24, color: 'var(--forest-900)' }}>+${matched}</div>
              </div>
            </div>
            <div style={{ textAlign: 'center', marginTop: 18, color: 'var(--cream-50)' }}>
              <span style={{ fontSize: 'var(--fs-small)', color: 'var(--text-on-forest-muted)' }}>{t(lang, 'Total produce power', 'Poder total en frutas/verduras')}: </span>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-black)', fontSize: 28, color: 'var(--leaf-400)' }}>${total}</span>
            </div>
          </Card>

          {/* How it works */}
          <Card tone="forest" pad="lg" style={{ background: 'var(--forest-700)' }}>
            <Pill tone="gold">{t(lang, 'How it works', 'Cómo funciona')}</Pill>
            <ol style={{ margin: '18px 0 0', paddingLeft: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
                { en: 'Shop for any fresh, frozen, or canned fruits & vegetables.', es: 'Compra frutas y verduras frescas, congeladas o enlatadas.' },
                { en: 'Pay with your EBT card at a participating Oasis register.', es: 'Paga con tu tarjeta EBT en una caja Oasis participante.' },
                { en: 'Earn Double Up dollars back — same amount, up to the daily cap.', es: 'Gana dólares Double Up — la misma cantidad, hasta el límite diario.' },
                { en: 'Spend them on more produce on your next visit. It adds up fast.', es: 'Úsalos en más frutas y verduras en tu próxima visita. Suma rápido.' },
              ].map((s, i) => (
                <li key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <span style={{ flexShrink: 0, width: 30, height: 30, borderRadius: 'var(--radius-pill)', background: 'var(--gold-500)', color: 'var(--forest-900)', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 15 }}>{i + 1}</span>
                  <span style={{ color: 'var(--cream-50)', fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-snug)', paddingTop: 3 }}>{t(lang, s.en, s.es)}</span>
                </li>
              ))}
            </ol>
          </Card>
        </div>
        <p style={{ color: 'var(--text-on-forest-muted)', fontSize: 'var(--fs-caption)', marginTop: 'var(--space-6)', textAlign: 'center' }}>
          {t(lang, 'Match amounts shown are illustrative. Ask an Oasis helper for current Double Up Oklahoma limits.', 'Las cantidades mostradas son ilustrativas. Pregunta a un ayudante de Oasis por los límites actuales de Double Up Oklahoma.')}
        </p>
      </div>
    </section>
  );
}
Object.assign(window, { SaveSection });