/* EbtCard — interactive "Know your EBT card" anatomy. Tap a numbered spot on the
   card (or a row) to learn what each part is. Educational + tactile. */
function EbtCard({ lang }) {
  const parts = [
    { n: 1, x: '6%',  y: '86%', color: 'var(--gold-500)',
      en: 'Your name', es: 'Tu nombre',
      d: { en: 'The card belongs to you. Only you (or someone you trust) should use it.', es: 'La tarjeta es tuya. Solo tú (o alguien de confianza) debe usarla.' } },
    { n: 2, x: '8%',  y: '47%', color: 'var(--clementine-500)',
      en: 'Chip & card number', es: 'Chip y número de tarjeta',
      d: { en: 'Your 16-digit number. Use it to register online at ConnectEBT.com.', es: 'Tu número de 16 dígitos. Úsalo para registrarte en ConnectEBT.com.' } },
    { n: 3, x: '82%', y: '12%', color: 'var(--leaf-500)',
      en: 'Where it works', es: 'Dónde funciona',
      d: { en: 'Swipe at Oasis and thousands of stores. It works just like a debit card.', es: 'Deslízala en Oasis y miles de tiendas. Funciona como tarjeta de débito.' } },
    { n: 4, x: '84%', y: '72%', color: 'var(--berry-500)',
      en: 'Keep your PIN secret', es: 'Mantén tu PIN en secreto',
      d: { en: 'Your 4-digit PIN protects your money. Never share it — Oasis will never ask.', es: 'Tu PIN de 4 dígitos protege tu dinero. Nunca lo compartas — Oasis nunca lo pedirá.' } },
  ];
  const [sel, setSel] = React.useState(1);

  return (
    <section style={{ padding: 'var(--space-20) 0', background: 'var(--sky-100)' }}>
      <div className="oasis-container">
        <SectionHead
          eyebrow={t(lang, 'Know your card', 'Conoce tu tarjeta')}
          title={t(lang, 'Your EBT card, explained', 'Tu tarjeta EBT, explicada')}
          intro={t(lang, 'Tap a number on the card to learn what each part does.', 'Toca un número en la tarjeta para aprender qué hace cada parte.')}
        />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 'var(--space-12)', alignItems: 'center' }}>
          {/* The card */}
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <div className="oasis-ebt-card">
              <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 90% at 100% 0%, rgba(227,161,44,0.25), transparent 55%)' }}></div>
              <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', height: '100%', justifyContent: 'space-between' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <div>
                    <div style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--gold-400)', fontWeight: 800 }}>{t(lang, 'Oklahoma EBT', 'EBT de Oklahoma')}</div>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, marginTop: 2, whiteSpace: 'nowrap' }}>{t(lang, 'Food Benefits', 'Beneficios')}</div>
                  </div>
                  <Icon name="Nfc" size={26} stroke="var(--gold-400)" />
                </div>
                <div style={{ width: 46, height: 34, borderRadius: 7, background: 'linear-gradient(135deg, var(--gold-400), var(--gold-500))', boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.15)' }}></div>
                <div>
                  <div style={{ fontFamily: 'var(--font-body)', letterSpacing: '0.12em', fontSize: 'clamp(15px, 3.4vw, 20px)', fontWeight: 700 }}>5077 6789 0123 4567</div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontSize: 12, color: 'var(--text-on-forest-muted)', fontWeight: 700, letterSpacing: '0.05em' }}>
                    <span>ALEX MORGAN</span><span>VALID THRU 09/29</span>
                  </div>
                </div>
              </div>
              {/* hotspots */}
              {parts.map((p) => (
                <button key={p.n} type="button" onClick={() => setSel(p.n)} aria-label={t(lang, p.en, p.es)}
                  className="oasis-ebt-hot" style={{
                    position: 'absolute', left: p.x, top: p.y, width: 30, height: 30, borderRadius: 999,
                    background: sel === p.n ? p.color : 'rgba(255,255,255,0.9)',
                    color: sel === p.n ? '#fff' : p.color,
                    border: `2px solid ${p.color}`, display: 'grid', placeItems: 'center',
                    fontWeight: 900, fontSize: 14, fontFamily: 'var(--font-display)',
                    boxShadow: sel === p.n ? `0 0 0 6px ${p.color}33` : 'var(--shadow-sm)',
                  }}>{p.n}</button>
              ))}
            </div>
          </div>

          {/* The explanations */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
            {parts.map((p) => {
              const active = sel === p.n;
              return (
                <button key={p.n} type="button" onClick={() => setSel(p.n)} style={{
                  textAlign: 'left', cursor: 'pointer', display: 'flex', gap: 14, alignItems: 'flex-start',
                  padding: 'var(--space-5)', borderRadius: 'var(--radius-lg)',
                  background: active ? 'var(--surface-raised)' : 'rgba(255,255,255,0.55)',
                  border: `2px solid ${active ? p.color : 'transparent'}`,
                  boxShadow: active ? 'var(--shadow-md)' : 'none',
                  transition: 'all var(--dur-base) var(--ease-out)',
                }}>
                  <span style={{ flexShrink: 0, width: 34, height: 34, borderRadius: 999, background: p.color, color: '#fff', display: 'grid', placeItems: 'center', fontWeight: 900, fontFamily: 'var(--font-display)', fontSize: 16 }}>{p.n}</span>
                  <span>
                    <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--fs-h4)', color: 'var(--text-strong)', lineHeight: 1.2 }}>{t(lang, p.en, p.es)}</span>
                    <span style={{ display: 'block', fontSize: 'var(--fs-body)', color: 'var(--text-body)', marginTop: 4, lineHeight: 'var(--lh-normal)' }}>{t(lang, p.d.en, p.d.es)}</span>
                  </span>
                </button>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { EbtCard });