/* Hero — warm welcome, big headline, primary CTAs, floating produce + stats */
function Hero({ lang }) {
  const { Button } = window.OasisFreshMarketEBTSNAPGuideDesignSystem_23fc30;

  const stats = [
    { n: t(lang, '1 in 6', '1 de 6'), l: t(lang, 'Oklahomans use SNAP', 'personas en OK usan SNAP') },
    { n: '$0', l: t(lang, 'cost for in-store help', 'cuesta la ayuda en tienda') },
    { n: '2×', l: t(lang, 'produce with Double Up', 'frutas con Double Up') },
  ];

  // floating decorative produce emoji-free: use lucide produce icons in soft coins
  const floats = [
    { icon: 'Apple',   top: '12%', left: '6%',  c: 'var(--berry-500)',     bg: 'var(--berry-100)',     d: 0 },
    { icon: 'Carrot',  top: '60%', left: '3%',  c: 'var(--clementine-500)',bg: 'var(--clementine-100)',d: 600 },
    { icon: 'Grape',   top: '20%', right: '7%', c: 'var(--forest-700)',    bg: 'var(--leaf-100)',      d: 300 },
    { icon: 'Wheat',   top: '68%', right: '5%', c: 'var(--gold-500)',      bg: 'var(--gold-100)',      d: 900 },
  ];

  return (
    <section id="top" style={{ position: 'relative', overflow: 'hidden', paddingTop: 'var(--space-12)', paddingBottom: 'var(--space-20)' }}>
      {/* soft radial glow */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(120% 80% at 50% -10%, rgba(111,190,134,0.20), transparent 60%)',
      }} />

      {floats.map((f, i) => (
        <div key={i} className="oasis-float oasis-hide-sm" style={{
          position: 'absolute', top: f.top, left: f.left, right: f.right,
          width: 64, height: 64, borderRadius: 'var(--radius-pill)',
          background: f.bg, display: 'grid', placeItems: 'center',
          boxShadow: 'var(--shadow-md)', animationDelay: f.d + 'ms',
        }}>
          <Icon name={f.icon} size={30} stroke={f.c} strokeWidth={2.2} />
        </div>
      ))}

      <div className="oasis-narrow" style={{ position: 'relative', textAlign: 'center' }}>
        <Reveal>
          <div className="oasis-eyebrow" style={{ marginBottom: 16 }}>{t(lang, 'Oklahoma EBT & SNAP Guide · 2026', 'Guía de EBT y SNAP de Oklahoma · 2026')}</div>
        </Reveal>
        <Reveal delay={80}>
          <h1 style={{ fontSize: 'clamp(44px, 7vw, 76px)', lineHeight: 1.02, margin: 0 }}>
            <span style={{ color: 'var(--forest-700)' }}>{t(lang, 'Your benefits,', 'Tus beneficios,')}</span><br />
            <span style={{ color: 'var(--ink-900)' }}>{t(lang, 'made simple.', 'fáciles de usar.')}</span>
          </h1>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ fontSize: 'var(--fs-lead)', lineHeight: 'var(--lh-normal)', color: 'var(--text-body)', maxWidth: 620, margin: '20px auto 0' }}>
            {t(lang,
              'A clear, friendly guide to using your EBT card in Oklahoma — what you can buy, how to apply, and how to make every dollar go further at Oasis Fresh Market.',
              'Una guía clara y amable para usar tu tarjeta EBT en Oklahoma — qué puedes comprar, cómo solicitar, y cómo aprovechar cada dólar en Oasis Fresh Market.')}
          </p>
        </Reveal>
        <Reveal delay={240}>
          <div style={{ display: 'flex', gap: 'var(--space-4)', justifyContent: 'center', flexWrap: 'wrap', marginTop: 'var(--space-8)' }}>
            <Button as="a" href="#buy" variant="primary" size="lg" iconRight={<Icon name="ArrowRight" size={20} stroke="currentColor" />}>
              {t(lang, 'What can I buy?', '¿Qué puedo comprar?')}
            </Button>
            <Button as="a" href="#apply" variant="secondary" size="lg">
              {t(lang, 'How to apply', 'Cómo solicitar')}
            </Button>
          </div>
        </Reveal>

        <Reveal delay={340}>
          <div style={{
            display: 'flex', gap: 'var(--space-8)', justifyContent: 'center', flexWrap: 'wrap',
            marginTop: 'var(--space-16)',
          }}>
            {stats.map((s, i) => (
              <div key={i} style={{ textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-black)', fontSize: 'clamp(34px,5vw,48px)', color: 'var(--forest-700)', lineHeight: 1 }}>{s.n}</div>
                <div style={{ fontSize: 'var(--fs-small)', color: 'var(--text-muted)', marginTop: 6, maxWidth: 150 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}
Object.assign(window, { Hero });