/* FactsTicker — a colorful, auto-scrolling band of bite-size facts right under
   the hero. Instant pop + quick learning. Hover to pause. */
function FactsTicker({ lang }) {
  const facts = [
    { icon: 'Apple',        color: 'var(--leaf-500)',       en: 'Fresh, frozen & canned produce all count', es: 'Frutas frescas, congeladas y enlatadas cuentan' },
    { icon: 'Coins',        color: 'var(--gold-500)',       en: 'Double Up turns $1 into $2 on produce', es: 'Double Up convierte $1 en $2 en frutas/verduras' },
    { icon: 'Sprout',       color: 'var(--leaf-600)',       en: 'Seeds & food plants are covered', es: 'Las semillas y plantas de comida están cubiertas' },
    { icon: 'CalendarDays', color: 'var(--sky-500)',        en: 'Benefits load the same day every month', es: 'Los beneficios llegan el mismo día cada mes' },
    { icon: 'HandHelping',  color: 'var(--clementine-500)', en: 'Free in-store helpers, English & Spanish', es: 'Ayudantes gratis en tienda, inglés y español' },
    { icon: 'ShieldCheck',  color: 'var(--forest-700)',     en: 'Never share your PIN — Oasis won’t ask', es: 'Nunca compartas tu PIN — Oasis no lo pedirá' },
    { icon: 'Baby',         color: 'var(--berry-500)',      en: 'Babies? Look into WIC too — you can have both', es: '¿Bebés? Mira WIC también — puedes tener ambos' },
  ];
  const loop = [...facts, ...facts];

  return (
    <div className="oasis-ticker-wrap" style={{
      background: 'var(--forest-900)', padding: '16px 0', overflow: 'hidden',
      borderTop: '3px solid var(--gold-500)', borderBottom: '3px solid var(--gold-500)',
    }}>
      <div className="oasis-ticker">
        {loop.map((f, i) => (
          <div key={i} style={{
            display: 'inline-flex', alignItems: 'center', gap: 10, flexShrink: 0,
            padding: '9px 18px', borderRadius: 'var(--radius-pill)',
            background: 'rgba(255,255,255,0.06)', border: '1.5px solid rgba(255,255,255,0.12)',
          }}>
            <span style={{ width: 30, height: 30, borderRadius: 999, background: f.color, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
              <Icon name={f.icon} size={17} stroke="#fff" strokeWidth={2.4} />
            </span>
            <span style={{ color: 'var(--cream-50)', fontWeight: 700, fontSize: 'var(--fs-small)', whiteSpace: 'nowrap' }}>{t(lang, f.en, f.es)}</span>
          </div>
        ))}
      </div>
    </div>
  );
}
Object.assign(window, { FactsTicker });