/* MythFact — tap a card to reveal the real fact. Uses an in-place crossfade
   (myth → fact) rather than a 3D flip, so it's rock-solid everywhere.
   Red myth → green fact. Educational and very shareable. */
function MythFact({ lang }) {
  const items = [
    { myth: { en: 'SNAP is only for people who don’t work.', es: 'SNAP es solo para quien no trabaja.' },
      fact: { en: 'Most SNAP households have someone working. Low pay can still qualify you.', es: 'La mayoría de los hogares con SNAP tienen a alguien trabajando. Un salario bajo aún puede calificarte.' } },
    { myth: { en: 'Using SNAP hurts my immigration case.', es: 'Usar SNAP daña mi caso migratorio.' },
      fact: { en: 'SNAP is not part of the “public charge” test. Eligible family members can apply.', es: 'SNAP no es parte de la prueba de “carga pública”. Los familiares elegibles pueden solicitar.' } },
    { myth: { en: 'I can buy anything at the store with EBT.', es: 'Puedo comprar lo que sea con EBT.' },
      fact: { en: 'EBT covers food to cook at home — not hot meals, soap, or (in 2026) candy & soda.', es: 'EBT cubre comida para cocinar en casa — no comida caliente, jabón, ni (en 2026) dulces y refrescos.' } },
    { myth: { en: 'Applying takes weeks of paperwork.', es: 'Solicitar toma semanas de papeleo.' },
      fact: { en: 'The online application takes about 20 minutes, and an Oasis helper can do it with you.', es: 'La solicitud en línea toma unos 20 minutos, y un ayudante de Oasis puede hacerla contigo.' } },
  ];
  const [open, setOpen] = React.useState(() => new Set());
  const toggle = (i) => setOpen((p) => { const n = new Set(p); n.has(i) ? n.delete(i) : n.add(i); return n; });

  return (
    <section style={{ padding: 'var(--space-20) 0', background: 'var(--clementine-100)' }}>
      <div className="oasis-container">
        <SectionHead
          center
          eyebrow={t(lang, 'Myth vs Fact', 'Mito vs Realidad')}
          title={t(lang, 'Let’s clear a few things up', 'Aclaremos algunas cosas')}
          intro={t(lang, 'Tap a card to reveal the truth.', 'Toca una tarjeta para ver la verdad.')}
        />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 'var(--space-5)' }}>
          {items.map((it, i) => {
            const isOpen = open.has(i);
            const color = isOpen ? 'var(--leaf-500)' : 'var(--berry-500)';
            return (
              <button key={i} type="button" onClick={() => toggle(i)} aria-pressed={isOpen} style={{
                position: 'relative', textAlign: 'left', cursor: 'pointer', height: 248, padding: 'var(--space-6)',
                borderRadius: 'var(--radius-lg)', overflow: 'hidden',
                background: isOpen ? 'var(--yes-bg)' : 'var(--no-bg)',
                border: `2px solid ${color}`, boxShadow: isOpen ? 'var(--shadow-md)' : 'var(--shadow-sm)',
                transition: 'box-shadow var(--dur-base) var(--ease-out)',
                display: 'flex', flexDirection: 'column',
              }}>
                {/* badge */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
                  <span style={{ width: 36, height: 36, borderRadius: 999, background: color, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                    <Icon name={isOpen ? 'Check' : 'X'} size={20} stroke="#fff" strokeWidth={3} />
                  </span>
                  <span style={{ fontWeight: 900, letterSpacing: '0.08em', textTransform: 'uppercase', fontSize: 13, color }}>
                    {isOpen ? t(lang, 'Fact', 'Realidad') : t(lang, 'Myth', 'Mito')}
                  </span>
                </div>

                {/* single text — always matches state */}
                <div style={{ position: 'relative', flex: 1 }}>
                  <div key={isOpen ? 'fact' : 'myth'} className="oasis-rise" style={{
                    fontFamily: isOpen ? 'var(--font-body)' : 'var(--font-display)',
                    fontWeight: isOpen ? 600 : 800,
                    fontSize: isOpen ? 'var(--fs-body-lg)' : 'var(--fs-h4)',
                    color: 'var(--forest-900)', lineHeight: isOpen ? 'var(--lh-normal)' : 1.28,
                  }}>
                    {isOpen ? t(lang, it.fact.en, it.fact.es) : '“' + t(lang, it.myth.en, it.myth.es) + '”'}
                  </div>
                </div>

                {/* hint */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, color, fontWeight: 700, fontSize: 'var(--fs-caption)', marginTop: 10 }}>
                  <Icon name={isOpen ? 'RotateCcw' : 'Eye'} size={15} stroke={color} />
                  {isOpen ? t(lang, 'Tap to hide', 'Toca para ocultar') : t(lang, 'Tap for the truth', 'Toca por la verdad')}
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { MythFact });