/* ApplySteps — a colorful "journey" to your benefits. A dashed trail connects
   four vibrant numbered stations (alternating sides on desktop), each with an
   icon, a time estimate, and a practical tip. Far livelier than a step list. */
function ApplySteps({ lang }) {
  const { Callout, Button, Pill } = window.OasisFreshMarketEBTSNAPGuideDesignSystem_23fc30;

  const steps = [
    {
      n: '1', icon: 'ClipboardCheck',
      color: 'var(--clementine-500)', soft: 'var(--clementine-100)',
      time: { en: '2 min', es: '2 min' },
      en: 'Check if you qualify', es: 'Verifica si calificas',
      body: { en: 'Most Oklahoma households at or below 130% of the poverty line qualify. A family of 4 can earn up to about $3,380 a month and still get help.', es: 'La mayoría de los hogares de Oklahoma con ingresos del 130% del nivel de pobreza o menos califican. Una familia de 4 puede ganar hasta unos $3,380 al mes.' },
      tip: { en: 'Not sure? Apply anyway — it’s free to find out.', es: '¿No estás seguro? Solicita de todos modos — averiguarlo es gratis.' },
    },
    {
      n: '2', icon: 'MousePointerClick',
      color: 'var(--gold-500)', soft: 'var(--gold-100)',
      time: { en: '~20 min', es: '~20 min' },
      en: 'Apply online or by phone', es: 'Solicita en línea o por teléfono',
      body: { en: 'Apply free at OKDHSLive.org, or call 405-522-5050. No computer? An Oasis helper can sit with you and do it together.', es: 'Solicita gratis en OKDHSLive.org, o llama al 405-522-5050. ¿Sin computadora? Un ayudante de Oasis puede sentarse contigo y hacerlo juntos.' },
      tip: { en: 'Have your address and birthdays handy.', es: 'Ten a mano tu dirección y fechas de nacimiento.' },
    },
    {
      n: '3', icon: 'PhoneCall',
      color: 'var(--leaf-500)', soft: 'var(--leaf-100)',
      time: { en: '15 min call', es: 'llamada de 15 min' },
      en: 'Do your interview', es: 'Haz tu entrevista',
      body: { en: 'A worker calls you for a short, friendly interview. Have your ID, proof of income, and your rent or bills ready.', es: 'Un trabajador te llama para una entrevista corta y amable. Ten lista tu identificación, prueba de ingresos, y tus cuentas o renta.' },
      tip: { en: 'Save the DHS number so you answer the call.', es: 'Guarda el número de DHS para contestar la llamada.' },
    },
    {
      n: '4', icon: 'CreditCard',
      color: 'var(--forest-700)', soft: 'var(--leaf-100)',
      time: { en: 'a few days', es: 'unos días' },
      en: 'Get your EBT card', es: 'Recibe tu tarjeta EBT',
      body: { en: 'If approved, your card arrives in the mail. Benefits load on the same day each month — then just swipe like a debit card.', es: 'Si te aprueban, tu tarjeta llega por correo. Los beneficios se cargan el mismo día cada mes — luego solo deslízala como tarjeta de débito.' },
      tip: { en: 'Write down the day your benefits arrive.', es: 'Anota el día en que llegan tus beneficios.' },
    },
  ];

  return (
    <section id="apply" style={{ padding: 'var(--space-20) 0', position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(180deg, var(--cream-50), var(--cream-100))' }}>
      <div className="oasis-container" style={{ position: 'relative' }}>
        <SectionHead
          center
          eyebrow={t(lang, 'How to apply', 'Cómo solicitar')}
          title={t(lang, 'Your road to benefits', 'Tu camino a los beneficios')}
          intro={t(lang, 'Four friendly stops, start to finish. Most people are surprised how fast it goes.', 'Cuatro paradas amables, de principio a fin. A la mayoría le sorprende lo rápido que es.')}
        />

        {/* Start flag */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 8 }}>
          <Pill tone="leaf" iconLeft={<Icon name="Flag" size={15} stroke="var(--leaf-600)" />}>{t(lang, 'Start here', 'Empieza aquí')}</Pill>
        </div>

        <div className="oasis-journey">
          {/* central dashed trail */}
          <div className="oasis-trail" aria-hidden="true"></div>

          {steps.map((s, i) => {
            const left = i % 2 === 0;
            return (
              <Reveal key={s.n} delay={i * 90}>
                <div className={'oasis-station ' + (left ? 'is-left' : 'is-right')}>
                  {/* the coin sits on the trail */}
                  <div className="oasis-coin" style={{ background: s.color, boxShadow: `0 8px 22px ${s.soft}, 0 0 0 6px var(--cream-100)` }}>
                    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 26, color: '#fff' }}>{s.n}</span>
                  </div>

                  <div className="oasis-station-card" style={{ borderTop: `5px solid ${s.color}` }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
                      <div style={{ width: 46, height: 46, borderRadius: 'var(--radius-md)', background: s.soft, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                        <Icon name={s.icon} size={26} stroke={s.color} strokeWidth={2.3} />
                      </div>
                      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 12px', borderRadius: 'var(--radius-pill)', background: s.soft, color: s.color, fontWeight: 800, fontSize: 13 }}>
                        <Icon name="Clock" size={14} stroke={s.color} /> {t(lang, s.time.en, s.time.es)}
                      </div>
                    </div>
                    <h3 style={{ fontSize: 'var(--fs-h3)', margin: '0 0 8px', color: 'var(--text-strong)' }}>{t(lang, s.en, s.es)}</h3>
                    <p style={{ margin: '0 0 14px', fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-normal)', color: 'var(--text-body)' }}>{t(lang, s.body.en, s.body.es)}</p>
                    <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start', padding: '10px 14px', background: 'var(--surface-sunk)', borderRadius: 'var(--radius-md)' }}>
                      <Icon name="Lightbulb" size={18} stroke="var(--gold-500)" style={{ marginTop: 1, flexShrink: 0 }} />
                      <span style={{ fontSize: 'var(--fs-small)', color: 'var(--text-body)', fontWeight: 500 }}>{t(lang, s.tip.en, s.tip.es)}</span>
                    </div>
                  </div>
                </div>
              </Reveal>
            );
          })}

          {/* Finish */}
          <div className="oasis-finish">
            <div className="oasis-coin oasis-coin-finish" style={{ background: 'var(--gold-500)', boxShadow: '0 10px 28px rgba(227,161,44,.4), 0 0 0 6px var(--cream-100)' }}>
              <Icon name="PartyPopper" size={28} stroke="var(--forest-900)" strokeWidth={2.4} />
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'var(--fs-h3)', color: 'var(--forest-700)' }}>{t(lang, 'You’re ready to shop!', '¡Listo para comprar!')}</div>
          </div>
        </div>

        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          <Callout tone="info" title={t(lang, 'Already have an EBT card?', '¿Ya tienes tarjeta EBT?')}
            icon={<Icon name="CreditCard" size={24} stroke="var(--sky-500)" />}>
            {t(lang, 'Check your balance any time at ConnectEBT.com or call the number on the back of your card. Keep your PIN secret — Oasis will never ask for it.',
                     'Revisa tu saldo en ConnectEBT.com o llama al número detrás de tu tarjeta. Mantén tu PIN en secreto — Oasis nunca te lo pedirá.')}
          </Callout>
          <div style={{ marginTop: 'var(--space-8)', textAlign: 'center' }}>
            <Button as="a" href="https://www.okdhslive.org" target="_blank" variant="primary" size="lg" iconRight={<Icon name="ExternalLink" size={18} stroke="currentColor" />}>
              {t(lang, 'Start my application', 'Comenzar mi solicitud')}
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { ApplySteps });