/* HelperSection — the human angle: Oasis in-store guides shop with you */
function HelperSection({ lang }) {
  const { Button, Card } = window.OasisFreshMarketEBTSNAPGuideDesignSystem_23fc30;

  const feats = [
    { icon: 'HandHelping', en: 'They walk the aisles with you', es: 'Caminan los pasillos contigo' },
    { icon: 'Languages',   en: 'English & Spanish speakers', es: 'Hablan inglés y español' },
    { icon: 'Receipt',     en: 'Help you stretch every dollar', es: 'Te ayudan a estirar cada dólar' },
    { icon: 'Coins',       en: 'Show you how to use Double Up', es: 'Te enseñan a usar Double Up' },
  ];

  return (
    <section id="help" style={{ padding: 'var(--space-20) 0' }}>
      <div className="oasis-container">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 'var(--space-12)', alignItems: 'center' }}>
          <div>
            <SectionHead
              eyebrow={t(lang, 'You are not alone', 'No estás solo')}
              title={t(lang, 'A real person will shop with you', 'Una persona real comprará contigo')}
              intro={t(lang, 'Oasis Fresh Market has trained guides inside the store. They walk the aisles with you, answer your questions, and show you how to get the most from your benefits. It is always free.', 'Oasis Fresh Market tiene guías capacitados dentro de la tienda. Caminan contigo, responden tus preguntas y te muestran cómo aprovechar tus beneficios al máximo. Siempre es gratis.')}
            />
            <Button as="a" href="https://www.oasisfreshmarkets.net/" target="_blank" variant="primary" size="lg" iconRight={<Icon name="MapPin" size={20} stroke="currentColor" />}>
              {t(lang, 'Find a store near me', 'Encuentra una tienda cerca')}
            </Button>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            <image-slot
              id="oasis-helpers"
              shape="rounded"
              radius="22"
              placeholder={t(lang, 'Drop a photo of an in-store helper', 'Agrega una foto de un ayudante en tienda')}
              style={{ width: '100%', minHeight: '200px', boxShadow: 'var(--shadow-sm)' }}>
            </image-slot>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)' }}>
            {feats.map((f, i) => (
              <Reveal key={i} delay={i * 90}>
                <div style={{
                  background: 'var(--surface-card)', border: '1.5px solid var(--border-soft)',
                  borderRadius: 'var(--radius-lg)', padding: 'var(--space-6)', height: '100%',
                  boxShadow: 'var(--shadow-sm)',
                }}>
                  <div style={{ width: 52, height: 52, borderRadius: 'var(--radius-md)', background: 'var(--leaf-100)', display: 'grid', placeItems: 'center', marginBottom: 14 }}>
                    <Icon name={f.icon} size={28} stroke="var(--forest-700)" strokeWidth={2.2} />
                  </div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-bold)', fontSize: 'var(--fs-body-lg)', color: 'var(--text-strong)', lineHeight: 1.2 }}>{t(lang, f.en, f.es)}</div>
                </div>
              </Reveal>
            ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { HelperSection });