/* SmartShopping — "Stretch every dollar." Practical, plain-language money-saving
   tips as a colorful card grid, plus a sample "fresh plate for less" strip.
   Educational and shareable. */
function SmartShopping({ lang }) {
  const { Pill } = window.OasisFreshMarketEBTSNAPGuideDesignSystem_23fc30;

  const tips = [
    { icon: 'ListChecks', color: 'var(--forest-700)', soft: 'var(--leaf-100)',
      en: 'Make a list first', es: 'Haz una lista primero',
      d: { en: 'Plan a few meals before you go. A list keeps you from buying things you won’t use.', es: 'Planea algunas comidas antes de ir. Una lista evita que compres cosas que no usarás.' } },
    { icon: 'Snowflake', color: 'var(--sky-500)', soft: 'var(--sky-100)',
      en: 'Frozen counts too', es: 'Lo congelado también cuenta',
      d: { en: 'Frozen fruits and veggies are just as healthy, last longer, and often cost less.', es: 'Las frutas y verduras congeladas son igual de sanas, duran más y cuestan menos.' } },
    { icon: 'Tags', color: 'var(--clementine-500)', soft: 'var(--clementine-100)',
      en: 'Buy store brands', es: 'Compra marcas de la tienda',
      d: { en: 'Store-brand staples like rice, beans, and pasta are the same food for less money.', es: 'Productos de marca propia como arroz, frijoles y pasta son la misma comida por menos.' } },
    { icon: 'Scale', color: 'var(--gold-500)', soft: 'var(--gold-100)',
      en: 'Check the unit price', es: 'Revisa el precio por unidad',
      d: { en: 'Look at the small “price per pound” tag. The bigger size is usually cheaper per serving.', es: 'Mira la etiqueta de “precio por libra”. El tamaño grande suele costar menos por porción.' } },
    { icon: 'Bean', color: 'var(--berry-500)', soft: 'var(--berry-100)',
      en: 'Beans & eggs go far', es: 'Frijoles y huevos rinden',
      d: { en: 'Beans, lentils, and eggs are cheap protein that fill you up and stretch a meal.', es: 'Frijoles, lentejas y huevos son proteína barata que llena y rinde la comida.' } },
    { icon: 'Coins', color: 'var(--leaf-600)', soft: 'var(--leaf-100)',
      en: 'Use Double Up', es: 'Usa Double Up',
      d: { en: 'Spend EBT on produce and earn matching dollars back. Free money for more fruits & veggies.', es: 'Gasta EBT en frutas/verduras y gana dólares iguales. Dinero gratis para más productos frescos.' } },
  ];

  const plate = [
    { icon: 'Wheat',   en: 'Rice & beans', es: 'Arroz y frijoles', price: '$0.60' },
    { icon: 'Egg',     en: 'Eggs', es: 'Huevos', price: '$0.45' },
    { icon: 'Carrot',  en: 'Veggies', es: 'Verduras', price: '$0.80' },
    { icon: 'Apple',   en: 'Fruit', es: 'Fruta', price: '$0.50' },
  ];

  return (
    <section id="shop" style={{ padding: 'var(--space-20) 0', background: 'var(--leaf-100)' }}>
      <div className="oasis-container">
        <SectionHead
          eyebrow={t(lang, 'Shop smart', 'Compra inteligente')}
          title={t(lang, 'Stretch every dollar', 'Aprovecha cada dólar')}
          intro={t(lang, 'Small habits add up to big savings at the register. Here’s where your benefits go furthest.', 'Pequeños hábitos suman grandes ahorros en la caja. Aquí es donde tus beneficios rinden más.')}
        />

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 'var(--space-5)' }}>
          {tips.map((tip, i) => (
            <Reveal key={i} delay={i * 70}>
              <div className="oasis-tip-card" style={{ height: '100%' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
                  <div style={{ width: 52, height: 52, borderRadius: 'var(--radius-md)', background: tip.soft, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                    <Icon name={tip.icon} size={28} stroke={tip.color} strokeWidth={2.3} />
                  </div>
                  <h3 style={{ margin: 0, fontSize: 'var(--fs-h4)', color: 'var(--text-strong)', lineHeight: 1.2 }}>{t(lang, tip.en, tip.es)}</h3>
                </div>
                <p style={{ margin: 0, fontSize: 'var(--fs-body)', color: 'var(--text-body)', lineHeight: 'var(--lh-normal)' }}>{t(lang, tip.d.en, tip.d.es)}</p>
              </div>
            </Reveal>
          ))}
        </div>

        {/* Cheap healthy plate */}
        <div style={{ marginTop: 'var(--space-12)', background: 'var(--surface-forest-deep)', borderRadius: 'var(--radius-xl)', padding: 'var(--space-8)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(80% 60% at 90% 0%, rgba(111,190,134,0.16), transparent 55%)' }} />
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 'var(--space-8)', alignItems: 'center' }}>
            <div>
              <Pill tone="gold">{t(lang, 'Real example', 'Ejemplo real')}</Pill>
              <h3 style={{ color: 'var(--cream-50)', fontSize: 'var(--fs-h3)', margin: '16px 0 10px' }}>{t(lang, 'A filling meal for about $2.35', 'Una comida que llena por unos $2.35')}</h3>
              <p style={{ color: 'var(--text-on-forest-muted)', margin: 0, fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-normal)' }}>
                {t(lang, 'Simple staples feed a person a balanced plate for the price of a soda. Cook once, eat twice.', 'Ingredientes simples dan un plato balanceado por el precio de un refresco. Cocina una vez, come dos.')}
              </p>
            </div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              {plate.map((p, i) => (
                <div key={i} style={{ flex: '1 1 110px', background: 'var(--forest-700)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-5) var(--space-4)', textAlign: 'center', border: '1.5px solid var(--forest-600)' }}>
                  <div style={{ width: 48, height: 48, margin: '0 auto 10px', borderRadius: 999, background: 'var(--forest-800)', display: 'grid', placeItems: 'center' }}>
                    <Icon name={p.icon} size={26} stroke="var(--leaf-400)" strokeWidth={2.3} />
                  </div>
                  <div style={{ color: 'var(--cream-50)', fontWeight: 700, fontSize: 'var(--fs-small)' }}>{t(lang, p.en, p.es)}</div>
                  <div style={{ color: 'var(--gold-400)', fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 18, marginTop: 2 }}>{p.price}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { SmartShopping });