/* BuyExplorer — interactive "Can I buy this with EBT?" grid.
   Tap any item to flip it and reveal YES / NO + a plain-language reason.
   Filter chips switch categories. This is the heart of the guide. */
function BuyExplorer({ lang }) {
  const { EligibilityBadge, Pill } = window.OasisFreshMarketEBTSNAPGuideDesignSystem_23fc30;

  const cats = [
    { id: 'all',     en: 'Everything',  es: 'Todo' },
    { id: 'yes',     en: 'You CAN buy', es: 'SÍ puedes' },
    { id: 'no',      en: "You CAN'T",   es: 'NO puedes' },
  ];

  const items = [
    { icon: 'Apple',        en: 'Fresh fruit & veggies', es: 'Frutas y verduras', ok: 'yes', re: { en: 'Always covered. Buy fresh, frozen, or canned.', es: 'Siempre cubierto. Fresco, congelado o enlatado.' } },
    { icon: 'Beef',         en: 'Meat, chicken & fish',  es: 'Carne, pollo y pescado', ok: 'yes', re: { en: 'Covered — including deli meats by the pound.', es: 'Cubierto — incluye carnes frías por libra.' } },
    { icon: 'Milk',         en: 'Milk, eggs & cheese',   es: 'Leche, huevos y queso', ok: 'yes', re: { en: 'All dairy is covered.', es: 'Todos los lácteos están cubiertos.' } },
    { icon: 'Wheat',        en: 'Bread & cereal',        es: 'Pan y cereal', ok: 'yes', re: { en: 'Covered, plus rice, pasta and flour.', es: 'Cubierto, más arroz, pasta y harina.' } },
    { icon: 'Sprout',       en: 'Seeds & food plants',   es: 'Semillas y plantas', ok: 'yes', re: { en: 'Yes! Plants that grow food are covered.', es: '¡Sí! Las plantas que dan comida están cubiertas.' } },
    { icon: 'Snowflake',    en: 'Frozen meals',          es: 'Comidas congeladas', ok: 'yes', re: { en: 'Covered — they are not "hot" prepared food.', es: 'Cubierto — no son comida caliente preparada.' } },
    { icon: 'Candy',        en: 'Candy & chocolate',     es: 'Dulces y chocolate', ok: 'no', re: { en: 'New for 2026: no longer covered in Oklahoma (Feb 15).', es: 'Nuevo en 2026: ya no está cubierto en Oklahoma (15 feb).' } },
    { icon: 'CupSoda',      en: 'Soda & soft drinks',    es: 'Refrescos', ok: 'no', re: { en: 'New for 2026: no longer covered in Oklahoma (Feb 15).', es: 'Nuevo en 2026: ya no está cubierto en Oklahoma (15 feb).' } },
    { icon: 'Flame',        en: 'Hot deli food',         es: 'Comida caliente', ok: 'no', re: { en: 'Hot, ready-to-eat food is not covered.', es: 'La comida caliente lista para comer no está cubierta.' } },
    { icon: 'Wine',         en: 'Beer, wine & tobacco',  es: 'Cerveza, vino y tabaco', ok: 'no', re: { en: 'Never covered by SNAP.', es: 'Nunca está cubierto por SNAP.' } },
    { icon: 'SprayCan',     en: 'Soap & cleaning',       es: 'Jabón y limpieza', ok: 'no', re: { en: 'Household items are not covered.', es: 'Los artículos del hogar no están cubiertos.' } },
    { icon: 'Pill',         en: 'Vitamins & medicine',   es: 'Vitaminas y medicina', ok: 'no', re: { en: 'Supplements with a "Supplement Facts" label are not covered.', es: 'Los suplementos con etiqueta "Supplement Facts" no están cubiertos.' } },
  ];

  const [cat, setCat] = React.useState('all');
  const [flipped, setFlipped] = React.useState(() => new Set());
  const shown = items.filter((it) => cat === 'all' || it.ok === cat);

  const toggle = (key) => setFlipped((p) => { const n = new Set(p); n.has(key) ? n.delete(key) : n.add(key); return n; });

  return (
    <section id="buy" style={{ background: 'var(--surface-sunk)', padding: 'var(--space-20) 0' }}>
      <div className="oasis-container">
        <SectionHead
          center
          eyebrow={t(lang, 'What can I buy?', '¿Qué puedo comprar?')}
          title={t(lang, 'Tap any item to find out', 'Toca cualquier artículo para saber')}
          intro={t(lang, 'SNAP covers food you make at home. Tap a card to flip it and see a plain-language answer.', 'SNAP cubre comida que preparas en casa. Toca una tarjeta para voltearla y ver la respuesta.')}
        />

        <div style={{ display: 'flex', gap: 'var(--space-3)', justifyContent: 'center', flexWrap: 'wrap', marginBottom: 'var(--space-10)' }}>
          {cats.map((c) => {
            const active = cat === c.id;
            return (
              <button key={c.id} type="button" onClick={() => setCat(c.id)} style={{
                padding: '10px 20px', borderRadius: 'var(--radius-pill)', cursor: 'pointer',
                fontFamily: 'var(--font-body)', fontWeight: 'var(--fw-bold)', fontSize: 'var(--fs-small)',
                border: '2px solid ' + (active ? 'var(--forest-700)' : 'var(--border-strong)'),
                background: active ? 'var(--forest-700)' : 'transparent',
                color: active ? 'var(--cream-50)' : 'var(--text-body)',
                transition: 'all var(--dur-base) var(--ease-out)',
              }}>{t(lang, c.en, c.es)}</button>
            );
          })}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 'var(--space-5)' }}>
          {shown.map((it) => {
            const key = it.en;
            const isFlipped = flipped.has(key);
            const yes = it.ok === 'yes';
            return (
              <button key={key} type="button" onClick={() => toggle(key)} className="oasis-flip" style={{
                position: 'relative', height: 180, border: 'none', background: 'transparent',
                cursor: 'pointer', padding: 0, perspective: 1000, textAlign: 'left',
              }}>
                <div style={{
                  position: 'relative', width: '100%', height: '100%',
                  transformStyle: 'preserve-3d',
                  transition: 'transform var(--dur-slow) var(--ease-spring)',
                  transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0)',
                }}>
                  {/* front */}
                  <div style={{
                    position: 'absolute', inset: 0, backfaceVisibility: 'hidden',
                    background: 'var(--surface-card)', border: '1.5px solid var(--border-soft)',
                    borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)',
                    padding: 'var(--space-5)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                  }}>
                    <div style={{
                      width: 56, height: 56, borderRadius: 'var(--radius-md)',
                      background: yes ? 'var(--leaf-100)' : 'var(--berry-100)', display: 'grid', placeItems: 'center',
                    }}>
                      <Icon name={it.icon} size={30} stroke={yes ? 'var(--leaf-600)' : 'var(--berry-500)'} strokeWidth={2.2} />
                    </div>
                    <div>
                      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-bold)', fontSize: 'var(--fs-h4)', color: 'var(--text-strong)', lineHeight: 1.15 }}>{t(lang, it.en, it.es)}</div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 8, color: 'var(--text-muted)', fontSize: 'var(--fs-caption)', fontWeight: 'var(--fw-semibold)' }}>
                        <Icon name="RefreshCw" size={14} stroke="currentColor" /> {t(lang, 'Tap to flip', 'Toca para voltear')}
                      </div>
                    </div>
                  </div>
                  {/* back */}
                  <div style={{
                    position: 'absolute', inset: 0, backfaceVisibility: 'hidden', transform: 'rotateY(180deg)',
                    background: yes ? 'var(--yes-bg)' : 'var(--no-bg)',
                    border: '2px solid ' + (yes ? 'var(--leaf-400)' : 'var(--berry-500)'),
                    borderRadius: 'var(--radius-lg)', padding: 'var(--space-5)',
                    display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                  }}>
                    <EligibilityBadge status={yes ? 'yes' : 'no'} size="sm">{yes ? t(lang, 'You CAN buy this', 'SÍ puedes comprar') : t(lang, "You CAN'T", 'NO puedes')}</EligibilityBadge>
                    <div style={{ fontSize: 'var(--fs-small)', lineHeight: 'var(--lh-normal)', color: 'var(--forest-900)', fontWeight: 'var(--fw-medium)' }}>{t(lang, it.re.en, it.re.es)}</div>
                  </div>
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { BuyExplorer });